简单项目之批量上传

Posted 2020-08-31 皇问天

之前做一小项目中需要批量上传功能，以前都是用的网上现成的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" onchange="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" onchange="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     //元素数据
 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 onclick=‘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 onclick=‘delpdf(this)‘>X</span></div>");
20         })
21         //向元素附加已选择的数据
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