js+分布上传大文件

青衣

　　
js+分布上传大文件

　　文件夹上传完毕
　　文件夹上传后在服务器中的层级结构
　　好，假定我们的所有用户都用上了 Chrome，要怎么做才能成功上传一个文件夹呢？这里不用drop这种高大上的东西，就用最传统的<input>。用表单 submit 和 ajax 都可以做，先看 submit 方式。
　　<form method="POST" enctype=multipart/form-data>
　　<input type='file' name="file" webkitdirectory >
　　<button>upload</button>
　　</form>
　　我们只要添加上 webkitdirectory 这个属性，在选择的时候就可以选择一个文件夹了，如果不加，文件夹被选中的时候就是灰色的。不过貌似加上这个属性就没法选中文件了... enctype=multipart/form-data 也是必要的，解释参见这里：http://blog.ncmem.com/wordpress/2019/08/09/js怎么上传文件夹/
　　如果用 ajax 方式，我们可以省去<form>，只留下<input>就 OK。
　　<input type='file' webkitdirectory > 
　　<button id="upload-btn" type="button">upload</button> 
　　但是这样是不够的，关键在于 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);
　　}
　　$.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怎么上传文件夹/