使用plupload進行多檔案上傳
阿新 • • 發佈：2019-02-11
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'pickfiles', / /觸發檔案選擇對話方塊的DOM元素
container: document.getElementById('container'), //展現上傳檔案列表的容器
url : 'esiAction_upLoads.action', //伺服器端接收和處理上傳檔案的指令碼地址
flash_swf_url : '../js/Moxie.swf', //flash上傳元件的url地址,當使用flash上傳方式會用到該引數.
silverlight_xap_url : '../js/Moxie.xap', //silverlight上傳元件的url地址，當使用silverlight上傳方式會用到該引數。
filters : {
max_file_size : '10mb', //最大上傳檔案大小
mime_types: [
{title : "Image files", extensions : "txt"}, //篩選檔案，只上傳txt檔案
{title : "Zip files", extensions : "zip"}
]
},
init: { //當Plupload初始化完成後觸發
PostInit: function() { //當Init事件發生後觸發
document.getElementById('filelist').innerHTML = '';
document.getElementById('uploadfiles').onclick = function() {
uploader.start();
return false;
};
},
FilesAdded: function(up, files) { //當檔案新增到上傳佇列後觸發,當上選擇好檔案後就將選擇好的檔案顯示在自己規定的div中顯示
plupload.each(files, function(file) {
document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
});
},
UploadProgress: function(up, file) { //顯示上傳進度條
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
},
Error: function(up, err) { //發生錯誤時觸發
document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
},
UploadComplete: function(uploader,file) { //當上傳佇列中所有檔案都上傳完成後觸發
$("#container").html('<form action="../page/esiAction_find.action" method="post" id="form2">'+
'<input type="text" name="filepath" />'
+'</form>');
$("#form2").submit();
}
}
});
uploader.init();
</script>