Jquery+Aajax 批量上传

注:转载请标明文章原始出处及作者信息

　　网上有现成的Uploadify、WebUpload等插件，自己写一个简单的（非插件）.

　　1.页面

　　批量上传页面

　　

 <form action="" id="formid">
     @Html.Hidden("filelist")
     <table>
         <tr>
             <td>
                 文件：
             </td>
             <td>
                 <div id="filediv" class="filediv"></div>
             </td>
         </tr>
         <tr>
             <td>
                 文件:
             </td>
             <td>
                     <input type="file" id="file" name="wfile"  accept=".pdf" onchange="upload();" multiple="multiple" />
                     选择文件

                 <span style="padding:5px;color:red;" id="scts">未选择文件</span>
             </td>
         </tr>
     </table>
 </form>

　　美化上传按钮

　　

    <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;">
                     <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" />
                     选择文件
                 </a>

　　文件列表

　　

 .filediv {
     height: 100px;
     background-color: burlywood;
     overflow-x: hidden;
     overflow-y: auto;
 }

　　2.脚本

　　选择文件

　　

 function upload() {
     //获得已选文件集合
     var fs = document.getElementById("file").files;
     //元素数据
     var fsarray = $("#filelist").data("data");
     if (fsarray) {
         //添加新选择的文件
         $.each(fs, function (i, v) {
             if (fsarray.indexOf(v.name) == -) {
                 fsarray.push(v);
                 $("#filediv").append("<div data-name='" + v.name + "' class='xdiv'>" + v.name + "<span onclick='delpdf(this)'>X</span></div>");
             }
         })
     }
     else {
         fsarray = new Array;
         $.each(fs, function (i, v) {
             fsarray.push(v);
             $("#filediv").append("<div data-name='" + v.name + "' class='xdiv'>" + v.name + "<span onclick='delpdf(this)'>X</span></div>");
         })
         //向元素附加已选择的数据
         $("#filelist").data("data", fsarray);
     }
     $("#scts").css("color", "green").text("已选择" + fsarray.length + "个文件");
 }

　　删除文件

　　

 function delpdf(obj) {
     var ar = $("#filelist").data("data");
     ar.splice(ar.indexOf("data-name"), );
     $(obj).parent().remove();
     $("#scts").css("color", ar.length ==  ? "red" : "green").text("已选择" + ar.length + "个文件");
 }

　　3.上传

　　

   if (!$("#formid").validate().form()) return false;
                 var fd = new FormData($("#formid")[]);
                 if ($("#wfile").outerHTML) {
                     $("#wfile").outerHTML = $("#wfile").outerHTML;
                 } else {
                     $("#wfile").value = "";
                 }
                 for (var i = ; i < $("#filelist").data("data").length; i++) {
                     fd.append("filelist[]", $("#filelist").data("data")[i])
                 }
                 $.ajax({
                     url: "/home/ManuscriptAdd",
                     type: "post",
                     dataType: "json",
                     data: fd,
                     processData: false,
                     contentType: false,
                     success: function (data) {
                         if (data.state == "") {
                             $.jBox.tip("上传成功", "success");
                             window.location.reload();
                         }
                         else {
                             $.jBox.tip(data.content, "error");
                         }
                     },
                     error: function (xhr) {
                         $.jBox.closeTip();
                     }
                 })