这个实例是我们公司最近要实现多图片上传而开发的。
其实这是我第一次写博客，格式写的不好的话，希望大家理解。废话不多说了，马上开整。
使用的是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
<script type="text/javascript" src="${pageContext.request.contextPath}/js-plug/plupload/js/plupload.full.min.js"></script>
<div class="picSet" style="height:118px; padding-top: 8px;" >
<div id="container" class="row" style="padding-top: 8px;">
<span class="label4">上传图片:</span>
//三个操作按钮
<a id="pickfiles" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">选择图片</a>
<a id="uploadfiles" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">上传</a>
<a id="cancel_uploadfiles" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消上传</a>
</div>
<br />
//如果控件加载出现问题，这里会出现提示。
//控件加载正确的后，这里用来存放上传的图片队列。
<div id="filelist">您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</div>
<br />
<pre id="console"></pre>
<script type="text/javascript">
//控件初始化配置
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 += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
});
},
//文件上传过程中，显示百分比
UploadProgress: function(up, file) {
document.getElementById(file.id).getElementsByTagName('b')
[0].innerHTML = '<span>' + file.percent + "%</span>";
},
//文件上传完毕后，刷新页面，同时清空上传队列
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();
</script>
</div>
注意：我开始写的时候，清空上传队列那里不是自己写的for循环手动清空的，用的是
UploadComplete: function(up, files) {
plupload.each(files, function(file) {
uploader.removeFile(file.id):从file中移除某个文件
}
}
但是使用过程中会报错，说file is undefined，debug调试后发现，用这种方式操作时，队列中的最后一个文件无法移除，不知道为什么，就自己改成手动的了。
先写到这里吧，上面的代码，有一部分是自己参考的，因为我写的时候也是在网上找的资料，但发现资料不是很全，所有就打算自己写一个，方便大家有需求的查看。以后还会写PluploadUtil 和 Plupload PO类，以及后台的action。给大家一个完整的例子！
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
