使用的是plupload-2.1.2 控件。网上资源挺多的，很好下载。
plupload 官方地址 : /
plupload 示例: /examples/
plupload Github: /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。给大家一个完整的例子！
