1、在開發中可能需要用戶附件上傳的功能,實現批量上傳功能其實就將多個上傳任務放到一個集合中,分別上傳。
2,使用plupload js插件可以很輕松的實現帶參數的多文件上傳
3、具體js實現方式
<script type="text/javascript">var map={};//文件id為key,文件類型為value的集合// Custom example logicvar uploader = new plupload.Uploader({runtimes : 'html5,flash,silverlight,html4',browse_button : 'pickfiles', // you can pass in id...container : document.getElementById('container'), // ... or DOM Element itselfurl : '../action/photoUpload.jsp',flash_swf_url : '../../js/Moxie.swf',silverlight_xap_url : '../../js/Moxie.xap',filters : {max_file_size : '5mb',mime_types : [ {title : "圖片類型",extensions : "jpg,gif,png"} ]},init : {PostInit : function() {document.getElementById('uploadfiles').onclick = function() {uploader.start();return false;};},BeforeUpload:function(up,file){//重點在這里,上傳的時候自定義參數信息uploader.setOption("multipart_params",{"apptype":${param.type},"id":${param.id},"fileType":map[file.id]});},FileUploaded:function(up,file){$("#"+file.id+"btn").parent().html("上傳完畢");$("#"+file.id+"btn").remove();},FilesAdded : function(up, files) {if($("#fileType").val()==1){alert("請選擇附件類型!");//清空剛才選擇的文件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+"')>刪除</button> </td><td id='"+file.id+"_progress'></td></tr>");});},UploadProgress : function(up, file) {$("#"+file.id+"_progress").html('<span>'+ file.percent + "%</span>");},Error : function(up, err) {alert("此文件上傳失??!");}}});uploader.init();//根據文件id刪除此文件,并且在table中刪除此文件的信息function del(id){uploader.removeFile(id);$("#"+id+"tr").remove();map[id]="";}</script>
其他參數在其官網上:http://www.plupload.com/
宅男程序猿,文采不行,如果看著累直接復制js,注意頁面上需要有:
<div id="filelist"></div><div id="container"><center>提示:必須上傳 "商戶營業執照","稅務登記證明","企業法人身份證","考察照片","商戶信息調查表","商戶協議" 才能提交審批!</center><label>附件類型:</label> <select name="fileType" id="fileType" ><option value="1">-------請選擇-----</option><option value="商戶營業執照">商戶營業執照</option><option value="稅務登記證明">稅務登記證明</option><option value="商戶信息變更表">商戶信息變更表</option><option value="其他">其他</option></select><button class="button" id="pickfiles">選擇文件</button> <button class="button" id="uploadfiles">批量上傳</button> <button class="button" onclick="window.location.reload()">刷新</button> <button class="button" onclick="window.close()">關閉窗口</button><table style="width: 600px" id="uploadTable" border="1"><tr><td>文件類型</td><td>文件名稱</td><td>操作</td><td>上傳進度</td></tr></table></div>
以上所述是小編給大家介紹的使用plupload自定義參數實現多文件上傳,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
|
新聞熱點
疑難解答