使用plupload自定義參數(shù)實(shí)現(xiàn)多文件上傳
1、在開發(fā)中可能需要用戶附件上傳的功能,實(shí)現(xiàn)批量上傳功能其實(shí)就將多個(gè)上傳任務(wù)放到一個(gè)集合中,分別上傳。
2,使用plupload js插件可以很輕松的實(shí)現(xiàn)帶參數(shù)的多文件上傳

3、具體js實(shí)現(xiàn)方式
<script type="text/javascript">
var map={};//文件id為key,文件類型為value的集合
// Custom example logic
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'pickfiles', // you can pass in id...
container : document.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 : "圖片類型",
extensions : "jpg,gif,png"
} ]
},
init : {
PostInit : function() {
document.getElementById('uploadfiles').onclick = function() {
uploader.start();
return false;
};
},
BeforeUpload:function(up,file){
//重點(diǎn)在這里,上傳的時(shí)候自定義參數(shù)信息
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("請(qǐng)選擇附件類型!");
//清空剛才選擇的文件
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();
//根據(jù)文件id刪除此文件,并且在table中刪除此文件的信息
function del(id){
uploader.removeFile(id);
$("#"+id+"tr").remove();
map[id]="";
}
</script>
其他參數(shù)在其官網(wǎng)上:http://www.plupload.com/
宅男程序猿,文采不行,如果看著累直接復(fù)制js,注意頁面上需要有:
<div id="filelist"></div> <div id="container"> <center> 提示:必須上傳 "商戶營業(yè)執(zhí)照","稅務(wù)登記證明","企業(yè)法人身份證","考察照片","商戶信息調(diào)查表","商戶協(xié)議" 才能提交審批! </center> <label>附件類型:</label> <select name="fileType" id="fileType" > <option value="1">-------請(qǐng)選擇-----</option> <option value="商戶營業(yè)執(zhí)照">商戶營業(yè)執(zhí)照</option> <option value="稅務(wù)登記證明">稅務(wù)登記證明</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()">關(guān)閉窗口</button> <table style="width: 600px" id="uploadTable" border="1"> <tr> <td>文件類型</td> <td>文件名稱</td> <td>操作</td> <td>上傳進(jìn)度</td> </tr> </table> </div>
以上所述是小編給大家介紹的使用plupload自定義參數(shù)實(shí)現(xiàn)多文件上傳,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- SSM框架+Plupload實(shí)現(xiàn)分塊上傳大文件示例
- JS插件plupload.js實(shí)現(xiàn)多圖上傳并顯示進(jìn)度條
- artDialog+plupload實(shí)現(xiàn)多文件上傳
- plupload+artdialog實(shí)現(xiàn)多平臺(tái)上傳文件
- yii2.0使用Plupload實(shí)現(xiàn)帶縮放功能的多圖上傳
- 使用Plupload實(shí)現(xiàn)直接上傳附件至七牛云存儲(chǔ)
- 使用JS+plupload直接批量上傳圖片到又拍云
- PHP + plupload.js實(shí)現(xiàn)多圖上傳并顯示進(jìn)度條加刪除實(shí)例代碼
相關(guān)文章
JavaScript SHA1加密算法實(shí)現(xiàn)詳細(xì)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript SHA1加密算法實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2016-10-10
JavaScript 實(shí)現(xiàn) Tab 點(diǎn)擊切換實(shí)例代碼
Tab 選項(xiàng)卡切換效果在現(xiàn)如今的網(wǎng)頁中,運(yùn)用的也是比較多的,包括點(diǎn)擊切換、滑動(dòng)切換、延遲切換、自動(dòng)切換等多種效果,在這篇博文里,我們是通過原生 JavaScript 來實(shí)現(xiàn) Tab 點(diǎn)擊切換的效果。2017-03-03
JS運(yùn)動(dòng)相關(guān)知識(shí)點(diǎn)小結(jié)(附彈性運(yùn)動(dòng)示例)
這篇文章主要介紹了JS運(yùn)動(dòng)相關(guān)知識(shí)點(diǎn),總結(jié)分析了JavaScript運(yùn)動(dòng)所涉及的相關(guān)知識(shí)點(diǎn)與注意事項(xiàng),并附帶了一個(gè)JavaScript彈性運(yùn)動(dòng)的實(shí)例供大家參考,需要的朋友可以參考下2016-01-01
js實(shí)現(xiàn)帶圓角的多級(jí)下拉菜單效果
這篇文章主要介紹了js實(shí)現(xiàn)帶圓角的多級(jí)下拉菜單效果,通過調(diào)用封裝的js庫ocscript.js實(shí)現(xiàn)圓角下拉菜單功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
JavaScript實(shí)現(xiàn)系統(tǒng)防掛機(jī)(無操作彈窗)的示例詳解
在一些學(xué)習(xí)系統(tǒng),或者考試系統(tǒng)中。一旦出現(xiàn)長時(shí)間未操作,就會(huì)判定這個(gè)人不在場。所以就會(huì)進(jìn)行退出系統(tǒng),處于對(duì)安全和系統(tǒng)負(fù)擔(dān)還有業(yè)務(wù)的需求。本文就來用JavaScript做一個(gè)系統(tǒng)防掛機(jī)功能,需要的可以參考一下2023-01-01
webpack常用構(gòu)建優(yōu)化策略小結(jié)
這篇文章主要介紹了webpack常用構(gòu)建優(yōu)化策略小結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
URLSearchParams快速解析URL查詢參數(shù)實(shí)現(xiàn)
這篇文章主要為大家介紹了URLSearchParams快速解析URL查詢參數(shù)實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
在JavaScript中使用mqtt.js的詳細(xì)過程
這篇文章主要介紹了在JavaScript中使用mqtt.js的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04

