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 File:7</td>8<td>9<div id="Filediv" class="Filediv"></div>Ten</td> One</tr> A<tr> -<td> - File: the</td> -<td> -<input type="file"Id="file"Name="Wfile"accept=". pdf"Onchange="upload ();"multiple="multiple"/> - Select File +                -<span style="padding:5px;color:red;"Id="SCTs"> File not selected </span> +</td> A</tr> at</table> -</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 File4</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 a collection of selected files3     varFS = document.getElementById ("file"). files;4     //element Data5     varFsarray = $ ("#filelist"). Data ("Data");6     if(Fsarray) {7         //Add a newly selected file8 $.each (FS, function (I, v) {9             if(Fsarray.indexof (v.name) = =-1) {Ten Fsarray.push (v); One$("#filediv"). Append ("<div data-name= '"+ V.name +"' class= ' xdiv ' >"+ V.name +"<span onclick= ' delpdf (this) ' >X</span></div>"); A             } -         }) -     } the     Else { -Fsarray =NewArray; - $.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>"); -         }) +         //Append selected data to an element A$("#filelist"). Data ("Data", Fsarray); at     } -$("#scts"). CSS ("Color","Green"). Text ("has been selected"+ Fsarray.length +"a file"); -}

View Code

deleting files

　　

1 function delpdf (obj) {2     varAR = $ ("#filelist"). Data ("Data");3Ar.splice (Ar.indexof ("Data-name"),1);4 $ (obj). Parent (). remove ();5$("#scts"). CSS ("Color", Ar.length = =0?"Red":"Green"). Text ("has been selected"+ Ar.length +"a file");6}

View Code

3. Upload

　　

1   if(!$("#formid"). Validate (). form ())return false;2                 varFD =NewFormData ($ ("#formid")[0]);3                 if($("#wfile"). outerhtml) {4$("#wfile"). outerHTML = $ ("#wfile"). outerhtml;5}Else { 6$("#wfile"). Value ="";7                 }8                  for(vari =0; I < $ ("#filelist"). Data ("Data"). length; i++) {9Fd.append ("filelist[]", $("#filelist"). Data ("Data") [i])Ten                 } One $.ajax ({ AUrl:"/home/manuscriptadd", -Type"Post", -DataType:"JSON", the DATA:FD, -ProcessData:false, -ContentType:false, - success:function (data) { +                         if(Data.state = =" $") { -$.jbox.tip ("Upload Successful","Success"); + window.location.reload (); A                         } at                         Else { -$.jbox.tip (Data.content,"Error"); -                         } -                     }, - error:function (XHR) { - $.jbox.closetip (); in                     } -})

View Code

　　

Batch upload of simple projects