文档章节

java多文件上传plupload控件实现多图片上传(一)

wallxu
 wallxu
发布于 2017/06/28 16:00
字数 868
阅读 98
收藏 0

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

© 著作权归作者所有

共有 人打赏支持
wallxu
粉丝 1
博文 3
码字总数 2534
作品 0
大兴
高级程序员
JEECG 上传插件升级——标签

前言: 现有的uploadify上传是基于swf的,随着H5的普及,flash即将退出历史舞台,JEECG团队本着与时俱进的原则,将全面升级JEECG系统中的上传功能,采用新式上传插件plupload,此插件上传支持多...

Jeecg
09/07
0
0
7款基于JavaScript和AJAX的文件上传插件

本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助。 1. jQuery File U...

EDIAGD
2013/09/23
0
0
JAVA基础再回首(二十九)——TCP传输、上传文件、上传图片、多并发上传

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m366917/article/details/52724684 JAVA基础再回首(二十九)——TCP传输、上传文件、上传图片、多并发上传 ...

Aduroidpc
2016/10/02
0
0
JAVA基础再回首(三十)——JAVA基础再回首完美结束,感概万千!

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m366917/article/details/52724939 JAVA基础再回首(三十)——JAVA基础再回首完美结束,感概万千! 经过了几...

Aduroidpc
2016/10/02
0
0
Struts2上传文件学习笔记

问题一:中文乱码 在使用Struts2实现文件上传时,若上传文件名为中文,则会在项目的发布目录中看上传文件名显示为乱码。解决办法很简单: 在struts.xml配置文件中配置: <constant name="st...

键盘小生
2012/06/10
0
1

没有更多内容

加载失败,请刷新页面

加载更多

HBase 表修复在线方式和离线方式

一、在线修复 1.1 使用检查命令 $ ./bin/hbase hbck 该命令可完整修复 HBase 元数据信息;存在有错误信息会进行输出; 也可以通过如下命令查看详细信息: $ ./bin/hbase hbck -details 1.2 ...

Ryan-瑞恩
4分钟前
0
0
redis 系列二 -- 常用命令

1.基础命令 info ping quit save dbsize select flushdb flushall 2.键命令 2.1 set 直接赋值 set a a 2.2 get 取值 get a 2.3 exists 是否存在 exists a 2.4 expire 设置剩余时间 秒 expire......

imbiao
36分钟前
1
0
php foreach

<?php// 数组的引用$a=array(1,2,3,4,5);foreach($a as $key=>&$value){$value=$value*2;}print_r($a);echo " $key -------------------$value\r\n";/** * ...

小张525
44分钟前
1
0
12-利用思维导图梳理JavaSE-多线程

12-利用思维导图梳理JavaSE-多线程 主要内容 1.线程概念 2.线程开发 3.线程的状态 4.线程的同步和死锁 5.Java5.0并发库类 QQ/知识星球/个人WeChat/公众号二维码 本文为原创文章,如果对你有一...

飞鱼说编程
今天
0
0
JAVA集合之ArrayList

一、前言 Java 集合类提供了一套设计良好的支持对一组对象进行操作的接口和类,JAVA常用的集合接口有4类,分别是: Collection:代表一组对象,每一个对象都是它的子元素 Set:不包含重复元素...

木木匠
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部