之前做一小項目中需要批量上傳功能，以前都是用的網上現(xiàn)成的Uploadify、WebUpload等插件，心想既然是小項目還是不用插件，所以不如自己寫一個（非插件）.

　　1.頁面

　　批量上傳頁面

1 <form action="" id="formid">2 @Html.Hidden("filelist")3 <table>4 <tr>5 <td>6 文件：7 </td>8 <td>9 <div id="filediv" class="filediv"></div> 10 </td> 11 </tr> 12 <tr> 13 <td> 14 文件: 15 </td> 16 <td> 17 <input type="file" id="file" name="wfile" accept=".pdf" οnchange="upload();" multiple="multiple" /> 18 選擇文件 19 20 <span style="padding:5px;color:red;" id="scts">未選擇文件</span> 21 </td> 22 </tr> 23 </table> 24 </form> View Code

　　美化上傳按鈕

1 <a href="javascript:" style="display:inline-block; width:100px;padding:5px; background:#007dce; position:relative; overflow:hidden;color:white;text-align:center;border-radius:4px;"> 2 <input style="cursor:pointer;position:absolute; right:0; top:0; font-size:100px; opacity:0;" type="file" id="file" name="wfile" accept=".pdf" οnchange="upload();" multiple="multiple" /> 3 選擇文件 4 </a> View Code

　　文件列表

1 .filediv { 2 height: 100px; 3 background-color: burlywood; 4 overflow-x: hidden; 5 overflow-y: auto; 6 } View Code

　　2.腳本

　　選擇文件

1 function upload() {2 //獲得已選文件集合3 var fs = document.getElementById("file").files;4 //元素數(shù)據5 var fsarray = $("#filelist").data("data");6 if (fsarray) {7 //添加新選擇的文件8 $.each(fs, function (i, v) {9 if (fsarray.indexOf(v.name) == -1) { 10 fsarray.push(v); 11 $("#filediv").append("<div data-name=‘" + v.name + "‘ class=‘xdiv‘>" + v.name + "<span οnclick=‘delpdf(this)‘>X</span></div>"); 12 } 13 }) 14 } 15 else { 16 fsarray = new Array; 17 $.each(fs, function (i, v) { 18 fsarray.push(v); 19 $("#filediv").append("<div data-name=‘" + v.name + "‘ class=‘xdiv‘>" + v.name + "<span οnclick=‘delpdf(this)‘>X</span></div>"); 20 }) 21 //向元素附加已選擇的數(shù)據 22 $("#filelist").data("data", fsarray); 23 } 24 $("#scts").css("color", "green").text("已選擇" + fsarray.length + "個文件"); 25 } View Code

　　刪除文件

1 function delpdf(obj) { 2 var ar = $("#filelist").data("data"); 3 ar.splice(ar.indexOf("data-name"), 1); 4 $(obj).parent().remove(); 5 $("#scts").css("color", ar.length == 0 ? "red" : "green").text("已選擇" + ar.length + "個文件"); 6 } View Code

　　3.上傳

1 if (!$("#formid").validate().form()) return false;2 var fd = new FormData($("#formid")[0]);3 if ($("#wfile").outerHTML) {4 $("#wfile").outerHTML = $("#wfile").outerHTML;5 } else { 6 $("#wfile").value = "";7 }8 for (var i = 0; i < $("#filelist").data("data").length; i++) {9 fd.append("filelist[]", $("#filelist").data("data")[i]) 10 } 11 $.ajax({ 12 url: "/home/ManuscriptAdd", 13 type: "post", 14 dataType: "json", 15 data: fd, 16 processData: false, 17 contentType: false, 18 success: function (data) { 19 if (data.state == "200") { 20 $.jBox.tip("上傳成功", "success"); 21 window.location.reload(); 22 } 23 else { 24 $.jBox.tip(data.content, "error"); 25 } 26 }, 27 error: function (xhr) { 28 $.jBox.closeTip(); 29 } 30 }) View Code

轉載于:https://www.cnblogs.com/huangwentian/p/6417849.html

總結

以上是生活随笔為你收集整理的简单项目之批量上传的全部內容，希望文章能夠幫你解決所遇到的問題。

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