使用的是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。給大家一個完整的例子！