文件夾上傳：從前端到后端

文件上傳是 Web 開發肯定會碰到的問題，而文件夾上傳則更加難纏。網上關于文件夾上傳的資料多集中在前端，缺少對于后端的關注，然后講某個后端框架文件上傳的文章又不會涉及文件夾。今天研究了一下這個問題，在此記錄。

先說兩個問題：

是否所有后端框架都支持文件夾上傳？

是否所有瀏覽器都支持文件夾上傳？

第一個問題：YES，第二個問題：NO

只要后端框架對于表單的支持是完整的，那么必然支持文件夾上傳。至于瀏覽器，截至目前，只有 Chrome 支持。

如果需要其它的瀏覽器支持則需要借助于插件，比如澤優大文件上傳控件：www.webuploader.net

關于WebUploader的功能說明：

大文件上傳續傳

支持超大文件上傳(100G+)和續傳，可以關閉瀏覽器，重啟系統后仍然繼續上傳。

開源

提供ASP.NET,JSP,PHP示例和源代碼，其中JSP提供MySQL,Oracle,SQL Server數據庫的配置和示例代碼。

分片、并發

分片與并發結合，將一個大文件分割成多塊，并發上傳，極大地提高大文件的上傳速度。

當網絡問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。

預覽、壓縮

支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網絡數據傳輸。

解析jpeg中的meta信息，對于各種orientation做了正確的處理，同時壓縮后上傳保留圖片的所有原始meta數據。

多途徑添加文件

支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。上傳本地指定路徑的文件，不需要通過點擊按鈕選擇文件。

粘貼功能主要體現在當有圖片數據在剪切板中時(截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制)，Ctrl + V便可添加此圖片文件。

HTML5 & FLASH

兼容主流瀏覽器和低版本瀏覽器，接口一致，實現了兩套運行時支持，用戶無需關心內部用了什么內核。而且支持IE6，IE8瀏覽器。

同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。

基于內存映射模式進行IO操作，充分發揮操作系統性能。

MD5秒傳

當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。

如果服務端與前端統一修改算法，取段md5，可大大提升驗證性能，耗時在20ms左右。

易擴展、可拆分

采用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。

采用AMD規范組織代碼，清晰明了，方便高級玩家擴展。

文件夾上傳

支持10萬+級別的文件夾上傳，續傳。

支持層級目錄結構保存，上傳后能夠將數據庫層級信息保存在數據庫中。

提供MySQL,Oracle,SQL Server數據庫支持。

支持文件夾續傳，在瀏覽器刷新，重啟后仍然能夠繼續上傳。

支持跨域上傳。

PC端全平臺支持

支持Windows,macOS,Linux。支持國產化操作系統，支持政務信息安全項目。

其中Windows支持低版本系統：Windows XP。

其中瀏覽器包括：IE6,IE7,IE8(x86,x64),IE9(x86,x64),IE10(x86,x64),IE11(x86,x64),360安全瀏覽器,360極速瀏覽器,QQ瀏覽器,搜狗瀏覽器,Maxthon(遨游)瀏覽器1.X,Maxthon(傲游)瀏覽器2.x,Firefox,Chrome,Opera 23+

選擇文件夾進行上傳

文件夾上傳完畢

文件夾上傳后在服務器中的層級結構

好，假定我們的所有用戶都用上了 Chrome，要怎么做才能成功上傳一個文件夾呢？這里不用drop這種高大上的東西，就用最傳統的。用表單 submit 和 ajax 都可以做，先看 submit 方式。

upload

我們只要添加上 webkitdirectory 這個屬性，在選擇的時候就可以選擇一個文件夾了，如果不加，文件夾被選中的時候就是灰色的。不過貌似加上這個屬性就沒法選中文件了... enctype=multipart/form-data 也是必要的，解釋參見這里：http://blog.ncmem.com/wordpress/2019/08/09/js怎么上傳文件夾/

如果用 ajax 方式，我們可以省去

，只留下就 OK。

upload

但是這樣是不夠的，關鍵在于 Js 的使用。

var files = [];

$(document).ready(function(){

$("input").change(function(){

files = this.files;

});

});

$("#upload-btn").click(function(){

var fd = new FormData();

for (var i = 0; i < files.length; i++) {

fd.append("file", files[i]);

}

$.ajax({

url: "/upload/",

method: "POST",

data: fd,

contentType: false,

processData: false,

cache: false,

success: function(data){

console.log(data);

}

});

});

用 ajax 方式，我們必須手動構造一個 FormData Object, 然后放在 data 里面提交到后端。 FormData 好像就只有一個 append 方法，第一個參數是 key，第二個參數是 value，用來構造表單數據。ajax請求中，通過 input 元素的 files 屬性獲取上傳的文件。files屬性不論加不加 webkitdirectory 都是存在的，用法也基本一樣。不過當我們上傳文件夾時，files 中會包含文件相對路徑的信息，之后會看到。

用 ajax 上傳的好處有兩點，首先是異步，這樣不會導致頁面卡住，其次是能比較方便地實現上傳進度條。關于上傳進度條的實現可以參考這里。需要注意的是contentType和processData必須設置成false，參考了這里：http://blog.ncmem.com/wordpress/2019/08/09/js怎么上傳文件夾/

總結

以上是生活随笔為你收集整理的大文件分片上传前端框架_js实现大文件分片上传的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。