java 批量上传图片插件_java多文件上传plupload控件实现多图片上传（一）
使用的是plupload-2.1.2 控件。網(wǎng)上資源挺多的，很好下載。
plupload 官方地址 : http://www.plupload.com/
plupload 示例: http://www.plupload.com/examples/
plupload Github:? https://github.com/moxiecode/plupload
整體框架用的是easyui + springMVC。
1、前臺(tái)jsp頁(yè)面代碼如下：
//先導(dǎo)入plupload的js
上傳圖片:
//三個(gè)操作按鈕
選擇圖片
上傳
取消上傳
//如果控件加載出現(xiàn)問(wèn)題，這里會(huì)出現(xiàn)提示。
//控件加載正確的后，這里用來(lái)存放上傳的圖片隊(duì)列。
您的瀏覽器未安裝 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .//控件初始化配置
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
//瀏覽文件按鈕
browse_button : 'pickfiles',
container: document.getElementById('container'),
//請(qǐng)求路徑
url : '/XXController/savePics.action',
flash_swf_url : '/js-plug/plupload/js/Moxie.swf',
silverlight_xap_url : '/js-plug/plupload/js/Moxie.xap',
//多部分上傳
multipart :true ,
// 上傳分塊每塊的大小，這個(gè)值小于服務(wù)器最大上傳限制的值即可。
chunk_size: '9mb',
//可以使用該參數(shù)來(lái)限制上傳文件的類(lèi)型
filters : {
max_file_size : '10mb',
mime_types: [//只允許上傳圖片
{
title : "Image files",
extensions : "jpg,gif,png,bmp"}
],
//不允許選取重復(fù)文件
prevent_duplicates : true
},
//當(dāng)Plupload初始化完成后觸發(fā)
init: {
PostInit: function() {
document.getElementById('filelist').innerHTML ='';
document.getElementById('uploadfiles').onclick = function() {
//隊(duì)列不為空給出上傳，否則給出錯(cuò)誤提示
if (uploader.files.length > 0) {
uploader.start();
return true;
} else {
alert('至少要選擇一張圖片！');
return false;
}
};
//取消上傳
document.getElementById('cancel_uploadfiles').onclick = function() { document.getElementById('filelist').innerHTML = '';
//獲取對(duì)列長(zhǎng)度
var CONSTLENGTH = uploader.files.length ;
//清空上傳文件隊(duì)列
for(var i=0; i < CONSTLENGTH; i++)
{
uploader.removeFile(uploader.files[0].id);
}
};
},
//上傳時(shí)的附加參數(shù)，以鍵/值對(duì)的形式傳入，
multipart_params: {
'參數(shù)A': '',
'參數(shù)B': ''
},
//設(shè)置你的參數(shù)
BeforeUpload : function(up , file){
//重點(diǎn)在這里，上傳的時(shí)候自定義參數(shù)信息
uploader.setOption("multipart_params",{
"參數(shù)A" : 參數(shù)A的值,
"參數(shù)B" : 參數(shù)B的值
});
},
//文件添加后，將文件名稱(chēng)和文件大小寫(xiě)入上傳隊(duì)列
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
document.getElementById('filelist').innerHTML += '
' +file.name + ' (' + plupload.formatSize(file.size) + ')
';});
},
//文件上傳過(guò)程中，顯示百分比
UploadProgress: function(up, file) {
document.getElementById(file.id).getElementsByTagName('b')
[0].innerHTML = '' + file.percent + "%";
},
//文件上傳完畢后，刷新頁(yè)面，同時(shí)清空上傳隊(duì)列
UploadComplete: function(up, files) {
document.getElementById('filelist').innerHTML = "";
//刷新頁(yè)面
//獲取對(duì)列長(zhǎng)度
var CONSTLENGTH = files.length ;
//清空上傳文件對(duì)列
for(var i=0; i < CONSTLENGTH; i++)
{
uploader.removeFile(files[0].id);
}
}
}
});
//初始化控件
uploader.init();
注意：我開(kāi)始寫(xiě)的時(shí)候，清空上傳隊(duì)列那里不是自己寫(xiě)的for循環(huán)手動(dòng)清空的，用的是
UploadComplete: function(up, files) {
plupload.each(files, function(file) {
uploader.removeFile(file.id):從file中移除某個(gè)文件
}
}
但是使用過(guò)程中會(huì)報(bào)錯(cuò)，說(shuō)file is undefined，debug調(diào)試后發(fā)現(xiàn)，用這種方式操作時(shí)，隊(duì)列中的最后一個(gè)文件無(wú)法移除，不知道為什么，就自己改成手動(dòng)的了。
先寫(xiě)到這里吧，上面的代碼，有一部分是自己參考的，因?yàn)槲覍?xiě)的時(shí)候也是在網(wǎng)上找的資料，但發(fā)現(xiàn)資料不是很全，所有就打算自己寫(xiě)一個(gè)，方便大家有需求的查看。以后還會(huì)寫(xiě)PluploadUtil 和 Plupload PO類(lèi)，以及后臺(tái)的action。給大家一個(gè)完整的例子！
總結(jié)
以上是生活随笔為你收集整理的java 批量上传图片插件_java多文件上传plupload控件实现多图片上传（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 安卓快捷方式app（安卓快捷方式）
- 下一篇： windows远程linux桌面（win