Using Plupload custom parameters to implement multiple file upload _javascript techniques

1, in the development of the user may need to upload the function of upload, the implementation of bulk uploads in fact, upload a number of tasks into a collection, respectively.

2, the use of Plupload JS plug-in can be very easy to achieve with the parameters of multiple file upload

3, the specific JS implementation mode

<script type= "Text/javascript" > var map={};//file ID is key, collection of file type value/Custom example logic var uploader = new Plup Load. Uploader ({runtimes: ' Html5,flash,silverlight,html4 ', Browse_button: ' Pickfiles ',//can pass in ID ... container:d Ocument.getelementbyid (' container '),//... or DOM Element itself URL: '. /action/photoupload.jsp ', Flash_swf_url: '. /.. /js/moxie.swf ', Silverlight_xap_url: '. /..  /js/moxie.xap ', filters: {max_file_size: ' 5MB ', mime_types: [{title: "Picture Type", Extensions: "Jpg,gif,png"}]}, init 
: {postinit:function () {document.getElementById (' uploadfiles '). onclick = function () {Uploader.start (); return false;
}; }, Beforeupload:function (up,file) {//focus here, when uploading the custom parameter information uploader.setoption ("Multipart_params", {"Apptype": ${
Param.type}, "id": ${param.id}, "FileType": Map[file.id]});
}, Fileuploaded:function (Up,file) {$ ("#" +file.id+ "BTN"). Parent (). HTML ("upload complete"); $ ("#" +file.id+ "BTN"). Remove (); Filesadded:function (up, files) {if ($ ("#fileType"). val () = =1) {Alert ("Please select attachment type!")
");
Empty the file you just selected Plupload.each (files,function (file) {uploader.removefile (file.id);});
return false; } plupload.each (files,function (file) {map[file.id]=$ ("#fileType"). Val (); $ ("#uploadTable"). Append ("<tr id=" + file.id+ "tr ' ><td>" +$ ("#fileType"). Val () + </td><td> "+file.name+" </td><td>< Button type= ' button ' id= ' "+file.id+" Btn ' Onclick=del (' +file.id+ ' ') > Delete </button> </td><td ' "+
file.id+ "_progress ' ></td></tr>");
}); }, Uploadprogress:function (up, file) {$ ("#" +file.id+ "_progress"). html (' <span> ' + file.percent +%</span> ");}, Error:function (up, err) {alert (" This file failed to upload! ")
");
}
}
});
Uploader.init ();
Deletes the file based on the file ID and deletes the information function del (ID) {uploader.removefile (ID) of the file in the table, $ ("#" +id+ "tr"). Remove (); map[id]= "";} </script>

Other parameters on its official website: http://www.plupload.com/

Otaku program ape, literary talent not, if look tired directly copy JS, note page needs:

<div id= "filelist" ></div> <div id= "container" > <center> hint: must upload "merchant business License", "Tax registration certificate", "Corporate identity card",
"Inspection Photos", "Merchant Information Questionnaire", "merchant agreement" can be submitted for approval! </center> <label> Attachment type:</label> <select name= "FileType" id= "FileType" > <option value= "1" >-------Please select-----</option> <option value= "merchant Business License" > Merchant Business License </option> <option value= "Tax Registration certificate" > Tax Registration Certificate </option> <option value= "Merchant Information Change Form" > Merchant Information Change table </option> <option value= "Other" > Other </ option> </select> <button class= "button" id= "Pickfiles" > select File </button>   <button class= "button" id= "Uploadfiles" > Bulk upload </button>   <button class= "button" onclick= " Window.location.reload () "> Refresh </button>   <button class=" button "onclick=" Window.close () "> Close window </button> <table style= "width:600px" id= "uploadtable" border= "1" > <tr> <td> file Type </td > <td> file name </td> <td> operation </td> <td> upload Progress </td> </tr> </table> </div> 

The above is a small series to introduce the use of Plupload custom parameters to achieve multiple file upload, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!