java多文件上传plupload控件实现多图片上传（一）

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

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

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