在项目中碰到的多文件的拖拽上传总结。
html代码部分：
<body><div class="fileBox"><p class="fileInputP vm"><i>选择文件</i><!-- 选中单个文件上传 --><input type="file" multiple id="fileInput" /></p><span id="fileSpan" class="vm">或者将文件拖到此处</span><div class="mask"></div></div><!-- 文件信息列表 --><table width="50%" border="1" class="fileList_parent"><thead><tr><th>书名</th><th>类型</th><th>大小</th><th>进度</th><th>操作</th></tr></thead><tbody class="fileList"></tbody></table><input type="button" value="上传" id="fileBtn" /></body>
.fileBox {margin: 50px;}.fileInputP {display: inline-block;width: 200px;height: 30px;border-radius: 5px;overflow: hidden;position: relative;}.fileInputP i {display: inline-block;width: 200px;height: 30px;color: #fff;background: #7d8f33;text-align: center;line-height: 30px;}#fileInput {position: absolute;left: 0;top: 0;right: 0;bottom: 0;opacity: 0;}#fileSpan {display: inline-block;width: 300px;height: 150px;border: 2px dashed #ccc;text-align: center;line-height: 150px;}.fileList_parent {margin: 50px;display: none;}.fileList_parent th {background: #dadada;font-weight: bold;}.fileList_parent th,.fileList_parent td {padding: 5px;}.fileList tr:nth-of-type(2n) {background: #dadada;}.progressParent {width: 200px;height: 20px;border-radius: 5px;background: #ccc;overflow: hidden;position: relative;}.progress {width: 0%;height: 20px;background: #7d8f33;}.progressNum {display: inline-block;width: 100%;height: 20px;text-align: center;line-height: 20px;color: #fff;position: absolute;left: 0;top: 0;}#fileBtn {margin-left: 50px;display: none;}
下面是关键的js代码部份
1 $(function() { 2 //元素 3 var oFileBox = $(".fileBox"); //选择文件父级盒子 4 var oFileInput = $("#fileInput"); //选择文件按钮 5 var oFileSpan = $("#fileSpan"); //选择文件框 6 var oFileList_parent = $(".fileList_parent"); //表格 7 var oFileList = $(".fileList"); //表格tbody 8 var oFileBtn = $("#fileBtn"); //上传按钮 9 10 var flieList = []; //数据，为一个复合数组 11 var sizeObj = []; //存放每个文件大小的数组，用来比较去重 12 13 //拖拽外部文件，进入目标元素触发 14 oFileSpan.on("dragenter", function() { 15 $(this).text("可以释放鼠标了！").css("background", "#ccc"); 16 }); 17 18 //拖拽外部文件，进入目标、离开目标之间，连续触发 19 oFileSpan.on("dragover", function() { 20 return false; 21 }); 22 23 //拖拽外部文件，离开目标元素触发 24 oFileSpan.on("dragleave", function() { 25 $(this).text("或者将文件拖到此处").css("background", "none"); 26 }); 27 28 //拖拽外部文件，在目标元素上释放鼠标触发 29 oFileSpan.on("drop", function(ev) { 30 var fs = ev.originalEvent.dataTransfer.files; 31 analysisList(fs); //解析列表函数 32 $(this).text("或者将文件拖到此处").css("background", "none"); 33 return false; 34 }); 35 36 //点击选择文件按钮选文件 37 oFileInput.on("change", function() { 38 analysisList(this.files); 39 }) 40 41 //解析列表函数 42 function analysisList(obj) { 43 //如果没有文件 44 if (obj.length < 1) { 45 return false; 46 } 47 48 for (var i = 0; i < obj.length; i++) { 49 50 var fileObj = obj[i]; //单个文件 51 var name = fileObj.name; //文件名 52 var size = fileObj.size; //文件大小 53 var type = fileType(name); //文件类型，获取的是文件的后缀 54 55 //文件大于30M，就不上传 56 if (size > 1024 * 1024 * 1024 || size == 0) { 57alert('“' + name + '”超过了30M，不能上传'); 58continue; 59 } 60 61 //文件类型不为这三种，就不上传 62 /*if( ("pdf/txt/epub").indexOf(type) == -1 ){ 63alert('“'+ name +'”文件类型不对，不能上传'); 64continue; 65 }*/ 66 67 //把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传 68 if (sizeObj.indexOf(size) != -1) { 69alert('“' + name + '”已经选择，不能重复上传'); 70continue; 71 } 72 73 //给json对象添加内容，得到选择的文件的数据 74 var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型 75 flieList.push(itemArr); 76 77 //把这个文件的大小放进数组中 78 sizeObj.push(size); 79 } 80 createList() //生成列表 81 oFileList_parent.show(); //表格显示 82 oFileBtn.show(); //上传按钮显示 83 }; 84 85 86 //生成列表 87 function createList() { 88 oFileList.empty(); //先清空元素内容 89 for (var i = 0; i < flieList.length; i++) { 90 91 var fileData = flieList[i]; //flieList数组中的某一个 92 var objData = fileData[0]; //文件 93 var name = fileData[1]; //文件名 94 var size = fileData[2]; //文件大小 95 var type = fileData[3]; //文件类型 96 var volume = bytesToSize(size); //文件大小格式化 97 98 99 var oTr = $("<tr></tr>");100 var str = '<td><cite title="' + name + '">' + name + '</cite></td>';101 str += '<td>' + type + '</td>';102 str += '<td>' + volume + '</td>';103 str += '<td>';104 str += '<div class="progressParent">';105 str += '<p class="progress"></p>';106 str += '<span class="progressNum">0%</span>';107 str += '</div>';108 str += '</td>';109 str += '<td><a href="javascript:;" class="operation">删除</a></td>';110 111 oTr.html(str);112 oTr.appendTo(oFileList);113 }114 }115 116 //删除表格行117 oFileList.on("click", "a.operation", function() {118 var oTr = $(this).parents("tr");119 var index = oTr.index();120 oTr.remove(); //删除这一行121 flieList.splice(index, 1); //删除数据122 sizeObj.splice(index, 1); //删除文件大小数组中的项123 124 //console.log(flieList);125 //console.log(sizeObj);126 127 });128 129 130 //上传131 oFileBtn.on("click", function() {132 oFileBtn.off();133 var tr = oFileList.find("tr"); //获取所有tr列表134 var successNum = 0; //已上传成功的数目135 oFileList.off(); //取消删除事件136 oFileBox.slideUp(); //隐藏输入框137 oFileList.find("a.operation").text("等待上传");138 139 140 for (var i = 0; i < tr.length; i++) {141 uploadFn(tr.eq(i), i); //参数为当前项，下标142 }143 144 function uploadFn(obj, i) {145 146 var formData = new FormData();147 var arrNow = flieList[i]; //获取数据数组的当前项148 149 // 从当前项中获取上传文件，放到 formData对象里面，formData参数以key name的方式150 var result = arrNow[0]; //数据151 formData.append("imageFile", result); // 给后台传的参数152 153 var name = arrNow[1]; //文件名154 formData.append("email", name); // 给后台传的参数155 156 var progress = obj.find(".progress"); //上传进度背景元素157 var progressNum = obj.find(".progressNum"); //上传进度元素文字158 var oOperation = obj.find("a.operation"); //按钮159 160 oOperation.text("正在上传"); //改变操作按钮161 oOperation.off();162 163 var request = $.ajax({164type: "POST",165url: "// 上传文件的路径",166data: formData, //这里上传的数据使用了formData 对象167processData: false, //必须false才会自动加上正确的Content-Type168contentType: false,169 170//这里我们先拿到jQuery产生的XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用171xhr: function() {172 var xhr = $.ajaxSettings.xhr();173 if (onprogress && xhr.upload) {174 xhr.upload.addEventListener("progress", onprogress, false);175 return xhr;176 }177},178 179//上传成功后回调180success: function() {181 oOperation.text("成功");182 successNum++;183 console.log(successNum);184 if (successNum == tr.length) {185 open("", "_self"); //如果全部传成功了，跳转186 }187},188 189//上传失败后回调190error: function() {191 oOperation.text("重传");192 oOperation.on("click", function() {193 request.abort(); //终止本次194 uploadFn(obj, i);195 });196}197 198 });199 200 201 //侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次202 function onprogress(evt) {203var loaded = evt.loaded; //已经上传大小情况204var tot = evt.total; //附件总大小205var per = Math.floor(100 * loaded / tot); //已经上传的百分比206progressNum.html(per + "%");207progress.css("width", per + "%");208 }209 }210 });211 })212 213 //字节大小转换，参数为b214 function bytesToSize(bytes) {215 var sizes = ['Bytes', 'KB', 'MB'];216 if (bytes == 0) return 'n/a';217 var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));218 return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];219 };220 221 //通过文件名，返回文件的后缀名222 function fileType(name) {223 var nameArr = name.split(".");224 return nameArr[nameArr.length - 1].toLowerCase();225 }
View Code
完成后效果如下图所示：
