文档章节

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

wallxu
 wallxu
发布于 2017/06/28 16:00
字数 868
阅读 87
收藏 0
点赞 0
评论 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
大兴
高级程序员
7款基于JavaScript和AJAX的文件上传插件

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

EDIAGD
2013/09/23
0
0
菜鸟看的Android应用开发全流程

给菜鸟看的Android应用开发全流程——好多Android开发中,没人告诉过你的事 很多菜鸟开始学习Android开发,去网上搜集过很多“Android开发教程”,但是搜索出来的东西,如果不是特别针对性的...

哈全文
2012/04/26
0
0
Struts2上传文件学习笔记

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

键盘小生
2012/06/10
0
1
fastdfs slave file mode 的应用场景及好处

fastdfs Java版本的上传api中有多种方式,当初对众多的接口还是比较疑惑,最近仔细看了Java api的文档和测试源码,对slave mode的上传模式有了更深的了解。 fastdfs的slave mode应用场景主要...

凯文加内特
2015/04/09
0
0
spring MVC 文件上传

参考博文:http://tzwzero-163-com.iteye.com/blog/1697184 ----------------------------------------以下是该文引用,红色部分是我添加了一句话--------------------------------- 必须明确......

vvx1024
2014/07/14
0
4
UpYun体验之Java SDK

申明:本文只希望做技术探讨,无其它意思。 目前我的工作主要使用的还是Java。所以,我决定使用UpYun官方提供的Java版的SDK体验下UpYun。 原SDK存在问题 当使用IDE打开源码来看时,我发现这个...

翟志军
2014/04/04
0
5
CKEditor和CKFinder整合实现上传下载功能

事先说明:此整合的是java版本的, 用到的有:jsp + ckeditor + ckfinder (没有servlet 及其它框架技术) 一.需要的资源: 用到的网站,文件自己下载: a) ckeditor_3.6.2 (解压) download...

jxlgzwh
2013/03/06
0
0
springboot 上传文件

设置文件大小限制 配置文件加上 或者使用bean注解 设置限制大小和 默认存放目录 java 使用 MultipartFile file 获取文件,然后保存到当前目录下 java 先获取到文件列表,然后批量保存...

阿豪boy
07/10
0
0
我的JDBC通用DAO(解说)

前两篇的连接: 1,我的JDBC通用DAO 2,我的JDBC通用DAO(续) 为了方便大家阅读和调试,现在把demo发出来 先介绍一下新增的类 首先是主角登场,业务模型类 @Table(name="model")public class...

高得顺
2013/03/15
0
7
multipart/form-data图片上传实现方法

在实现multipart/form-data的图片上传时,需要用rn来分隔每一行,在JAVA中实现multipart/form-data的图片上传时则可以使用System.getProperty("line.separator")来进行每一行的分割。但是如果...

脚下的节奏
2015/07/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

shell中的函数、shell中的数组、告警系统需求分析

shell中的函数 格式: 格式: function f_name() { command } 函数必须要放在最前面 示例1(用来打印参数) 示例2(用于定义加法) 示例3(用于显示IP) shell中的数组 shell中的数组1 定义数...

Zhouliang6
55分钟前
2
0
用 Scikit-Learn 和 Pandas 学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了。 1. 获取数据,定义问题     没有...

wangxuwei
今天
1
0
MAC安装MAVEN

一:下载maven压缩包(Zip或tar可选),解压压缩包 二:打开终端输入:vim ~/.bash_profile(如果找不到该文件新建一个:touch ./bash_profile) 三:输入i 四:输入maven环境变量配置 MAVEN_HO...

WALK_MAN
今天
0
0
33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作

10.19 iptables规则备份和恢复 10.20 firewalld的9个zone 10.21 firewalld关于zone的操作 10.22 firewalld关于service的操作 10.19 iptables规则备份和恢复: ~1. 保存和备份iptables规则 ~2...

王鑫linux
今天
2
0
大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
今天
1
0
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
今天
2
0
HFS

FS,它是一种上传文件的软件。 专为个人用户所设计的 HTTP 档案系统 - Http File Server,如果您觉得架设 FTP Server 太麻烦,那么这个软件可以提供您更方便的档案传输系统,下载后无须安装,...

garkey
今天
1
0
Java IO类库之BufferedInputStream

一、BufferedInputStream介绍 /** * A <code>BufferedInputStream</code> adds * functionality to another input stream-namely, * the ability to buffer the input and to * sup......

老韭菜
今天
0
0
STM 32 窗口看门狗

http://bbs.elecfans.com/jishu_805708_1_1.html https://blog.csdn.net/a1985831055/article/details/77404131...

whoisliang
昨天
1
0
Dubbo解析(六)-服务调用

当dubbo消费方和提供方都发布和引用完成后,第四步就是消费方调用提供方。 还是以dubbo的DemoService举例 -- 提供方<dubbo:application name="demo-provider"/><dubbo:registry address="z...

青离
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部