java多文件上传plupload控件实现多图片上传(一)
博客专区 > wallxu 的博客 > 博客详情
java多文件上传plupload控件实现多图片上传(一)
wallxu 发表于10个月前
java多文件上传plupload控件实现多图片上传(一)
  • 发表于 10个月前
  • 阅读 66
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】买域名送云解析+SSL证书+建站!>>>   

摘要: 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。给大家一个完整的例子!

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 3
码字总数 2534
×
wallxu
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: