文档章节

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

wallxu
 wallxu
发布于 2017/06/28 16:00
字数 868
阅读 279
收藏 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
大兴
高级程序员
私信 提问
加载中
请先登录后再评论。
Java web图片上传和文件上传

图片上传和文件上传本质上是一样的,图片本身也是文件。文件上传就是将图片上传到服务器,方式虽然有很多,但底层的实现都是文件的读写操作。 注意事项 1.form表单一定要写属性enctype="mult...

osc_xlt7v4t5
2019/02/26
8
0
小程序上传多张图片到springboot后台,返回可供访问的图片链接

最近在做小程序多图片上传到Java后台,Java后台是用springboot写的。也算是踩了不少坑,今天就来带大家来一步步实现小程序端多图片的上传。 首先看效果实现图 小程序端上传成功的回调 Java端...

osc_9ntog5yq
06/01
4
0
plupload上传

来源:http://asyty.iteye.com/blog/1230119/ 最近需要用到jquery文件上传插件,发现plupload这东西挺好的,奈何后台代码是php,tomcat得配置php才能跑起来,于是稍微研究了下,改成了java代码...

翊骷
2014/05/04
203
0
JEECG 上传插件升级——标签

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

JEECG开源社区
2018/09/07
630
0
JEECG 上传插件升级-代码生成器

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

JEECG开源社区
2018/09/07
52
0

没有更多内容

加载失败,请刷新页面

加载更多

Quartz的Misfire处理规则 错过任务执行时间的处理机制

调度(scheduleJob)或恢复调度(resumeTrigger,resumeJob)后不同的misfire对应的处理规则 CronTrigger withMisfireHandlingInstructionDoNothing ——不触发立即执行 ——等待下次Cron触发频率...

独钓渔
今天
4
0
如何在Django视图中合并两个或多个查询集? - How to combine two or more querysets in a Django view?

问题: I am trying to build the search for a Django site I am building, and in that search, I am searching in 3 different models. 我正在尝试搜索要构建的Django网站,在该搜索中,我......

javail
今天
5
0
PHP解析/语法错误; 以及如何解决它们? - PHP parse/syntax errors; and how to solve them?

问题: Everyone runs into syntax errors. 每个人都遇到语法错误。 Even experienced programmers make typos. 即使是经验丰富的程序员也会打错字。 For newcomers, it's just part of the......

fyin1314
今天
20
0
OSChina 周三乱弹 —— 公主是大王的,命是自己的。小怪也要养家糊口啊!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :郭燕的单曲《下半生》 最近听一些轻快的歌 #今日歌曲推荐# 《下半生》 - 郭燕 手机党少年们想听歌,请使劲儿戳(这里) @锦年 :...

小小编辑
今天
38
1
263. Ugly Number

题目: 263. Ugly Number 题目地址:https://leetcode.com/problems/ugly-number/ Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers......

JiaMing
今天
68
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部