使用的是plupload-2.1.2 控件。網上資源挺多的，很好下載。

plupload 官方地址 : http://www.plupload.com/

plupload 示例: http://www.plupload.com/examples/

plupload Github:? https://github.com/moxiecode/plupload

整體框架用的是easyui + springMVC。

1、前臺jsp頁面代碼如下：

//先導入plupload的js

上傳圖片:

//三個操作按鈕

選擇圖片

上傳

取消上傳

//如果控件加載出現問題，這里會出現提示。

//控件加載正確的后，這里用來存放上傳的圖片隊列。

您的瀏覽器未安裝 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .

//控件初始化配置

var uploader = new plupload.Uploader({

runtimes : 'html5,flash,silverlight,html4',

//瀏覽文件按鈕

browse_button : 'pickfiles',

container: document.getElementById('container'),

//請求路徑

url : '/XXController/savePics.action',

flash_swf_url : '/js-plug/plupload/js/Moxie.swf',

silverlight_xap_url : '/js-plug/plupload/js/Moxie.xap',

//多部分上傳

multipart :true ,

// 上傳分塊每塊的大小，這個值小于服務器最大上傳限制的值即可。

chunk_size: '9mb',

//可以使用該參數來限制上傳文件的類型

filters : {

max_file_size : '10mb',

mime_types: [//只允許上傳圖片

{

title : "Image files",

extensions : "jpg,gif,png,bmp"}

],

//不允許選取重復文件

prevent_duplicates : true

},

//當Plupload初始化完成后觸發

init: {

PostInit: function() {

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

document.getElementById('uploadfiles').onclick = function() {

//隊列不為空給出上傳，否則給出錯誤提示

if (uploader.files.length > 0) {

uploader.start();

return true;

} else {

alert('至少要選擇一張圖片！');

return false;

}

};

//取消上傳

document.getElementById('cancel_uploadfiles').onclick = function() { document.getElementById('filelist').innerHTML = '';

//獲取對列長度

var CONSTLENGTH = uploader.files.length ;

//清空上傳文件隊列

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

{

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

}

};

},

//上傳時的附加參數，以鍵/值對的形式傳入，

multipart_params: {

'參數A': '',

'參數B': ''

},

//設置你的參數

BeforeUpload : function(up , file){

//重點在這里，上傳的時候自定義參數信息

uploader.setOption("multipart_params",{

"參數A" : 參數A的值,

"參數B" : 參數B的值

});

},

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

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 + "%";

},

//文件上傳完畢后，刷新頁面，同時清空上傳隊列

UploadComplete: function(up, files) {

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

//刷新頁面

//獲取對列長度

var CONSTLENGTH = files.length ;

//清空上傳文件對列

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

{

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

}

}

}

});

//初始化控件

uploader.init();

注意：我開始寫的時候，清空上傳隊列那里不是自己寫的for循環手動清空的，用的是

UploadComplete: function(up, files) {

plupload.each(files, function(file) {

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

}

}

但是使用過程中會報錯，說file is undefined，debug調試后發現，用這種方式操作時，隊列中的最后一個文件無法移除，不知道為什么，就自己改成手動的了。

先寫到這里吧，上面的代碼，有一部分是自己參考的，因為我寫的時候也是在網上找的資料，但發現資料不是很全，所有就打算自己寫一個，方便大家有需求的查看。以后還會寫PluploadUtil 和 Plupload PO類，以及后臺的action。給大家一個完整的例子！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。