java多文件上传plupload控件实现多图片上传（一）_JAVA_编程开发_程序员俱乐部

这个实例是我们公司最近要实现多图片上传而开发的。

其实这是我第一次写博客，格式写的不好的话，希望大家理解。废话不多说了，马上开整。

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

?