之前做一小项目中需要批量上传功能，以前都是用的网上现成的Uploadify、WebUpload等插件，心想既然是小项目还是不用插件，所以不如自己写一个（非插件）.

　　1.页面

　　批量上传页面

　　

1 
      
        2     @Html.Hidden("filelist") 3     
       
         4         
           5             
 8             
11         
12         
          13             
16             
22         
23     
        
         
          
 6                 文件： 7             
          
 9                 
           
10             
         
         
          
14                 文件:15             
          
17                     18                     选择文件19               20                 未选择文件21             
         
        
       
24 
      

　　美化上传按钮

　　

1    2                     3                     选择文件4                 

　　文件列表

　　

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

　　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("
      
       " + v.name + "
       X
      
");12             }13         })14     }15     else {16         fsarray = new Array;17         $.each(fs, function (i, v) {18             fsarray.push(v);19             $("#filediv").append("
      
       " + v.name + "
       X
      
");20         })21         //向元素附加已选择的数据22         $("#filelist").data("data", fsarray);23     }24     $("#scts").css("color", "green").text("已选择" + fsarray.length + "个文件");25 }

　　删除文件

　　

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 }

　　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                 })