使用的是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頁面代碼如下：

//先導(dǎo)入plupload的js

上傳圖片:

//三個(gè)操作按鈕

選擇圖片

上傳

取消上傳

//如果控件加載出現(xiàn)問題，這里會(huì)出現(xiàn)提示。

//控件加載正確的后，這里用來存放上傳的圖片隊(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ù)來限制上傳文件的類型

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ì)列長度

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的值

});

},

//文件添加后，將文件名稱和文件大小寫入上傳隊(duì)列

FilesAdded: function(up, files) {

plupload.each(files, function(file) {

document.getElementById('filelist').innerHTML += '

' +

file.name + ' (' + plupload.formatSize(file.size) + ')

';

});

},

//文件上傳過程中，顯示百分比

UploadProgress: function(up, file) {

document.getElementById(file.id).getElementsByTagName('b')

[0].innerHTML = '' + file.percent + "%";

},

//文件上傳完畢后，刷新頁面，同時(shí)清空上傳隊(duì)列

UploadComplete: function(up, files) {

document.getElementById('filelist').innerHTML = "";

//刷新頁面

//獲取對(duì)列長度

var CONSTLENGTH = files.length ;

//清空上傳文件對(duì)列

for(var i=0; i < CONSTLENGTH; i++)

{

uploader.removeFile(files[0].id);

}

}

}

});

//初始化控件

uploader.init();

注意：我開始寫的時(shí)候，清空上傳隊(duì)列那里不是自己寫的for循環(huán)手動(dòng)清空的，用的是

UploadComplete: function(up, files) {

plupload.each(files, function(file) {

uploader.removeFile(file.id):從file中移除某個(gè)文件

}

}

但是使用過程中會(huì)報(bào)錯(cuò)，說file is undefined，debug調(diào)試后發(fā)現(xiàn)，用這種方式操作時(shí)，隊(duì)列中的最后一個(gè)文件無法移除，不知道為什么，就自己改成手動(dòng)的了。

先寫到這里吧，上面的代碼，有一部分是自己參考的，因?yàn)槲覍懙臅r(shí)候也是在網(wǎng)上找的資料，但發(fā)現(xiàn)資料不是很全，所有就打算自己寫一個(gè)，方便大家有需求的查看。以后還會(huì)寫PluploadUtil 和 Plupload PO類，以及后臺(tái)的action。給大家一個(gè)完整的例子！

總結(jié)

以上是生活随笔為你收集整理的java 批量上传图片插件_java多文件上传plupload控件实现多图片上传（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。