簡單項目之批量上傳

標籤：外掛程式   分享   error   multiple   技術   splay   err   class   absolute   

之前做一小項目中需要批量上傳功能，以前都是用的網上現成的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

簡單項目之批量上傳