Batch upload of simple projects

Before doing a small project need bulk upload function, used to be online ready-made uploadify, webupload and other plug-ins, I thought that since it is a small project or no plug-ins, so it is better to write a (non-plug-in).

1. Page

Bulk upload Page

　　

1 <form action= "" id= "Formid" > 2     @Html. Hidden ("FileList") 3     <table> 4         <tr> 5             <TD > 6                 Files: 7             </td> 8             <td> 9                 <div id= "Filediv" class= "Filediv" ></div>10             </td>11         </tr>12         <tr>13             <td>14                 file:             </td>16             <TD >17                     <input type= "file" id= "file" Name= "Wfile"  accept= ". pdf" onchange= "upload ();" Multiple= "multiple "/>18                     Select File                 <span style=" padding:5px;color:red; id= "SCTs" > File not selected </span>21             </td>22         </tr>23     </table>24 </form>

View Code

Beautify the upload button

　　

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                     Select File 4                 </a>

View Code

File list

　　

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

View Code

2. Scripts

Select File

　　

 1 function upload () {2//Get the selected file Collection 3 var fs = document.getElementById ("file"). files; 4//Element data 5 var Fsarray = $ ("#filelist"). Data ("Data");  6 if (Fsarray) {7//Add newly selected file 8 $.each (FS, function (I, v) {9 if (Fsarray.indexof (v.name) = =-1) {Fsarray.push (v); $ ("#filediv"). Append ("<div data-name=" + v.name + "' cl ass= ' Xdiv ' > ' + v.name + ' <span onclick= ' delpdf (this) ' >X</span></div> '); 12}13}) 1 4}15 Else {fsarray = new array;17 $.each (FS, function (I, v) {Fsarray.push (v); 1 9 $ ("#filediv"). Append ("<div data-name=" + v.name + "' class= ' Xdiv ' >" + v.name + "<span onclick= ' del PDF (This) ' >X</span></div> '); 20}) 21//Append the selected data to the element $ ("#filelist"). Data ("Data", FSA Rray);}24 $ ("#scts"). CSS ("Color", "green"). Text ("selected" + Fsarray.length + "files");

View Code

deleting files

　　

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 ("selected" + Ar.length + "files"); 6}

View Code

3. Upload

　　

 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])}11 $.ajax ({12                     URL: "/home/manuscriptadd", type: "Post", DataType: "JSON", 15                     data:fd,16 processdata:false,17 contenttype:false,18 Success:function (data) {Data.state = = "$") {$.jbox.     Tip ("Upload success", "success"); Window.location.reload (); 22                    }23 else {$.jbox.tip (data.content, "error"); 25                         }26},27 error:function (XHR) {28 $.jbox.closetip (); 29}30})

View Code

Batch upload of simple projects