HTML5 拖曳批次上傳檔案的範例程式碼

此元件基於Vue.js 實現，UI 框架是elementUI,完整的demo 位址在https://github.com/Msxiaoma/upload-folder. 拖曳上傳資料夾(僅chrome支援)

1. 同時拖曳多個資料夾
2. 刪除指定資料夾
3. 顯示目前資料夾的上傳進度條
4. 超過5M的資料夾分片上傳

效果如下：

1. 拖曳讀取每個資料夾下面的檔案路徑
2. 如何顯示目前上傳的資料夾的進度條
3. 上傳文件時跨域攜帶cookie
4. 資料夾分片

在進行拖放操作時， DataTransfer 物件用來儲存，透過拖放動作，拖曳到瀏覽器的資料。它可以保存一項或多項資料、一種或多種資料類型

// 拖曳資料夾dropFolders (e) { e.stopPropagation() e.preventDefault() var items = e.dataTransfer.items for (var i = 0; i < items.length; i++) { var item = items[ i].webkitGetAsEntry() if (item) { this.checkFolders(item) } }}//判斷是否為資料夾checkFolders (item) { if (item.isDirectory) { this.traverseFileTree(item) } else { this.$alert('只支援上傳資料夾', '提示', { confirmButtonText: '確定' } ) }}traverseFileTree (item, path, parentDir) { path = path || '' if (item.isFile) { item.file((file) => { let obj = { file: file, path: path + file.name, attr: item.attr } this.filesList.push(obj) }) } else if (item.isDirectory) { var dirReader = item.createReader() dirReader.readEntries((entries) => { for (let i = 0; i < entries.length; i++) { entries[i].attr = item.attr this.traverseFileTree(entries[i], path + item.name + '/', temp) } }, function (e) { console. log(e) }) }}

沒有分片的檔案：根據資料夾中的檔案總數，算出每個檔案佔資料夾的百分比，當一個檔案上傳成功時，修改資料夾process；

分片的檔案：算出每個檔案佔檔案的百分比後，算出每塊檔案佔檔案的百分比，每塊檔案上傳成功後，修改資料夾的process.

當伺服器設定響應頭

Access-Control-Allow-Origin:必須指定明確的、與請求網頁一致的域名，不能為*。 Access-Control-Allow-Credentials: true

設定請求頭：

withCredentials:true

補充：

substr(start [, length ]) 傳回一個從指定位置開始的指定長度的子字串。

start:必選項。所需的子字串的起始位置。字串中的第一個字元的索引為0。

length:可選項。在傳回的子字串中應包含的字元數。

substring 傳回位於String 物件中指定位置的子字串,傳回一個包含從start 到最後（不包含end ）的子字串的字串

start:指明子字串的起始位置，該索引從0 開始起算。

end:指明子字串的結束位置，索引從0 開始算。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。