附件上传的插件介绍--- plupload

最新推荐文章于 2024-02-29 15:31:48 发布
最新推荐文章于 2024-02-29 15:31:48 发布
阅读量7.3k 收藏 11
点赞数 1
分类专栏： 技术宅

选择js篇章。

 

由于在使用上传附件的时候，在不同浏览器中遇到了兼容性问题，所以进行找到了这个控件，通过测试发现在edge，ie11,ie10,ie9.ie8,ie7兼容极速模式下是可以使用的。具体可以看看官方网站。

plupload很强大。

Plupload有以下功能和特点：

1、拥有多种上传方式：HTML5、flash、silverlight以及传统的<input type=”file” />。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。

2、支持以拖拽的方式来选取要上传的文件

3、支持在前端压缩图片，即在图片文件还未上传之前就对它进行压缩

4、可以直接读取原生的文件数据，这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览

5、支持把大文件切割成小片进行上传，因为有些浏览器对很大的文件比如几G的一些文件无法上传。

使用步骤：

第一步 引用js插件：


<script src="${pageContext.request.contextPath}/js/plupload-2.1.9/js/plupload.full.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.js"></script>

第二步 设置上传的按钮或者dom：

<p>
		<button id="browse">选择文件</button>
		<button id="start_upload">开始上传</button>
	</p>

对应的js：

//实例化一个plupload上传对象
		var uploader = new plupload.Uploader({
			browse_button : 'browse', //触发文件选择对话框的按钮，为那个元素id
			url : '${pageContext.request.contextPath}/fileUpload/upload', //服务器端的上传页面地址
			drop_element : 'div',
			flash_swf_url : 'js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
			silverlight_xap_url : 'js/Moxie.xap' //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
		});
 
		//在实例对象上调用init()方法进行初始化
		uploader.init();

第三步 与后台交互的事件触发：


//最后给"开始上传"按钮注册事件
		window.document.getElementById('start_upload').onclick = function() {
			
			uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
		}

第四步 后台的实现：

*所使用的技术是springMVC

@RequestMapping(value = "/upload")
	public void upload(@RequestParam(value = "file", required = false) MultipartFile file, HttpServletRequest request, HttpServletResponse response)
			throws IOException {
		InputStream inputStream = file.getInputStream();
 
		System.out.println("开始");
		String path = request.getSession().getServletContext().getRealPath("upload");
		String fileName = file.getOriginalFilename();
		// String fileName = new Date().getTime()+".jpg";
		System.out.println(path);
		
		response.getWriter().write("aa:bb");
	}

默认的值是file，当然可以在前端进行自定义。

 

关于上传过程中一系列的监听事件：

例如 上传结束后触发的事件：


uploader.bind('FileUploaded', function(uploader,file,responseObject) {
			alert("upload...");
			console.log(file);
			console.log(responseObject);
			console.log("aaaa");
		});

接下来详细介绍API：

                                                                                                                                          参数属性

 类型默认值描述
browse_buttonString / DOM 触发文件选择对话框的DOM元素，当点击该元素后便后弹出文件选择对话框。该值可以是DOM元素对象本身，也可以是该DOM元素的id
urlString 服务器端接收和处理上传文件的脚本地址，可以是相对路径(相对于当前调用Plupload的文档)，也可以是绝对路径
filtersObject{ }可以使用该参数来限制上传文件的类型，大小等，该参数以对象的形式传入，它包括三个属性：

mime_types：用来限定上传文件的类型，为一个数组，该数组的每个元素又是一个对象，该对象有title和extensions两个属性，title为该过滤器的名称，extensions为文件扩展名，有多个时用逗号隔开。该属性默认为一个空数组，即不做限制。

max_file_size：用来限定上传文件的大小，如果文件体积超过了该值，则不能被选取。值可以为一个数字，单位为b,也可以是一个字符串，由数字和单位组成，如'200kb'

prevent_duplicates：是否允许选取重复的文件，为true时表示不允许，为false时表示允许，默认为false。如果两个文件的文件名和大小都相同，则会被认为是重复的文件

filters完整的配置示例如下(当然也可以只配置其中的某一项)：

filters: {
  mime_types : [ //只允许上传图片和zip文件
    { title : "Image files", extensions : "jpg,gif,png" }, 
    { title : "Zip files", extensions : "zip" }
  ],
  max_file_size : '400kb', //最大只能上传400kb的文件
  prevent_duplicates : true //不允许选取重复文件
}
headersObject 设置上传时的自定义头信息，以键/值对的形式传入，键代表头信息属性名，键代表属性值。html4上传方式不支持设置该属性。
multipartBooleantrue为true时将以multipart/form-data的形式来上传文件，为false时则以二进制的格式来上传文件。html4上传方式不支持以二进制格式来上传文件，在flash上传方式中，二进制上传也有点问题。并且二进制格式上传还需要在服务器端做特殊的处理。一般我们用multipart/form-data的形式来上传文件就足够了。
multipart_paramsObject 上传时的附加参数，以键/值对的形式传入，服务器端可是使用$_POST来获取这些参数(以php为例)。比如： 
multipart_params: {
  one: '1',
  two: '2',
  three: { //值还可以是一个字面量对象
    a: '4',
    b: '5'
  },
  four: ['6', '7', '8']  //也可以是一个数组
}
max_retriesNumber0当发生plupload.HTTP_ERROR错误时的重试次数，为0时表示不重试
chunk_sizeNumber/String0分片上传文件时，每片文件被切割成的大小，为数字时单位为字节。也可以使用一个带单位的字符串，如"200kb"。当该值为0时表示不使用分片上传功能
resizeObject 可以使用该参数对将要上传的图片进行压缩，该参数是一个对象，里面包括5个属性：

width：指定压缩后图片的宽度，如果没有设置该属性则默认为原始图片的宽度

height：指定压缩后图片的高度，如果没有设置该属性则默认为原始图片的高度

crop：是否裁剪图片

quality：压缩后图片的质量，只对jpg格式的图片有效，默认为90。quality可以跟width和height一起使用，但也可以单独使用，单独使用时，压缩后图片的宽高不会变化，但由于质量降低了，所以体积也会变小

preserve_headers：压缩后是否保留图片的元数据，true为保留，false为不保留,默认为true。删除图片的元数据能使图片的体积减小一点点

resize参数的配置示例如下：

resize: {
  width: 100,
  height: 100,
  crop: true,
  quality: 60,
  preserve_headers: false
}
drop_elementDOM/String/Array 指定了使用拖拽方式来选择上传文件时的拖拽区域，即可以把文件拖拽到这个区域的方式来选择文件。该参数的值可以为一个DOM元素的id,也可是DOM元素本身，还可以是一个包括多个DOM元素的数组。如果不设置该参数则拖拽上传功能不可用。目前只有html5上传方式才支持拖拽上传。
multi_selectionBooleantrue是否可以在文件浏览对话框中选择多个文件，true为可以，false为不可以。默认true，即可以选择多个文件。需要注意的是，在某些不支持多选文件的环境中，默认值是false。比如在ios7的safari浏览器中，由于存在bug，造成不能多选文件。当然，在html4上传方式中，也是无法多选文件的。
required_featuresMix 可以使用该参数来设置你必须需要的一些功能特征，Plupload会根据你的设置来选择合适的上传方式。因为，不同的上传方式，支持的功能是不同的，比如拖拽上传只有html5上传方式支持，图片压缩则只有html5,flash,silverlight上传方式支持。该参数的值是一个混合类型，可以是一个以逗号分隔的字符串，
unique_namesBooleanfalse当值为true时会为每个上传的文件生成一个唯一的文件名，并作为额外的参数post到服务器端，参数明为name,值为生成的文件名。
runtimesStringhtml5,flash,
silverlight,
html4		用来指定上传方式，指定多个上传方式请使用逗号隔开。一般情况下，你不需要配置该参数，因为Plupload默认会根据你的其他的参数配置来选择最合适的上传方式。如果没有特殊要求的话，Plupload会首先选择html5上传方式，如果浏览器不支持html5，则会使用flash或silverlight，如果前面两者也都不支持，则会使用最传统的html4上传方式。如果你想指定使用某个上传方式，或改变上传方式的优先顺序，则你可以配置该参数。
file_data_nameStringfile指定文件上传时文件域的名称，默认为file,例如在php中你可以使用$_FILES['file']来获取上传的文件信息
containerDOM/String 用来指定Plupload所创建的html结构的父容器，默认为前面指定的browse_button的父元素。该参数的值可以是一个元素的id,也可以是DOM元素本身。
flash_swf_urlStringjs/Moxie.swfflash上传组件的url地址，如果是相对路径，则相对的是调用Plupload的html文档。当使用flash上传方式会用到该参数。
silverlight_xap_urlStringjs/Moxie.xapsilverlight上传组件的url地址，如果是相对路径，则相对的是调用Plupload的html文档。当使用silverlight上传方式会用到该参数。

 

 

 

                                                                                                                                  事件说明

Init

 
当Plupload初始化完成后触发

监听函数参数：(uploader)

uploader为当前的plupload实例对象

PostInit
当Init事件发生后触发

监听函数参数：(uploader)

uploader为当前的plupload实例对象

OptionChanged
当使用Plupload实例的setOption()方法改变当前配置参数后触发

监听函数参数：(uploader,option_name,new_value,old_value)

uploader为当前的plupload实例对象，option_name为发生改变的参数名称，new_value为改变后的值，old_value为改变前的值

Refresh
当调用plupload实例的refresh()方法后会触发该事件，暂时不清楚还有什么其他动作会触发该事件，但据我测试，把文件添加到上传队列后也会触发该事件。

监听函数参数：(uploader)

uploader为当前的plupload实例对象

StateChanged
当上传队列的状态发生改变时触发

监听函数参数：(uploader)

uploader为当前的plupload实例对象

UploadFile
当上传队列中某一个文件开始上传后触发

监听函数参数：(uploader,file)

uploader为当前的plupload实例对象，file为触发此事件的文件对象

BeforeUpload
当队列中的某一个文件正要开始上传前触发

监听函数参数：(uploader,file)

uploader为当前的plupload实例对象，file为触发此事件的文件对象

QueueChanged
当上传队列发生变化后触发，即上传队列新增了文件或移除了文件。QueueChanged事件会比FilesAdded或FilesRemoved事件先触发

监听函数参数：(uploader)

uploader为当前的plupload实例对象

UploadProgress
会在文件上传过程中不断触发，可以用此事件来显示上传进度

监听函数参数：(uploader,file)

uploader为当前的plupload实例对象，file为触发此事件的文件对象

FilesRemoved
当文件从上传队列移除后触发

监听函数参数：(uploader,files)

uploader为当前的plupload实例对象，files为一个数组，里面的元素为本次事件所移除的文件对象

FileFiltered
暂不清楚该事件的意义，但根据测试得出，该事件会在每一个文件被添加到上传队列前触发

监听函数参数：(uploader,file)

uploader为当前的plupload实例对象，file为触发此事件的文件对象

FilesAdded
当文件添加到上传队列后触发

监听函数参数：(uploader,files)

uploader为当前的plupload实例对象，files为一个数组，里面的元素为本次添加到上传队列里的文件对象

FileUploaded
当队列中的某一个文件上传完成后触发

监听函数参数：(uploader,file,responseObject)

uploader为当前的plupload实例对象，file为触发此事件的文件对象，responseObject为服务器返回的信息对象，它有以下3个属性：

response：服务器返回的文本

responseHeaders：服务器返回的头信息

status：服务器返回的http状态码，比如200

ChunkUploaded
当使用文件小片上传功能时，每一个小片上传完成后触发

监听函数参数：(uploader,file,responseObject)

uploader为当前的plupload实例对象，file为触发此事件的文件对象，responseObject为服务器返回的信息对象，它有以下5个属性：

offset：该文件小片在整体文件中的偏移量

response：服务器返回的文本

responseHeaders：服务器返回的头信息

status：服务器返回的http状态码，比如200

total：该文件(指的是被切割成了许多文件小片的那个文件)的总大小，单位为字节

UploadComplete
当上传队列中所有文件都上传完成后触发

监听函数参数：(uploader,files)

uploader为当前的plupload实例对象，files为一个数组，里面的元素为本次已完成上传的所有文件对象

Error
当发生错误时触发

监听函数参数：(uploader,errObject)

uploader为当前的plupload实例对象，errObject为错误对象，它至少包含以下3个属性(因为不同类型的错误，属性可能会不同)：

code：错误代码，具体请参考plupload上定义的表示错误代码的常量属性

file：与该错误相关的文件对象

message：错误信息

Destroy
当调用destroy方法时触发

监听函数参数：(uploader)

uploader为当前的plupload实例对象

 

 

 

 

 

                                                                                                                                              实例属性

 描述
idPlupload实例的唯一标识id
state当前的上传状态，可能的值为plupload.STARTED或plupload.STOPPED，该值由Plupload实例的stop()或statr()方法控制。默认为plupload.STOPPED
runtime当前使用的上传方式
files当前的上传队列，是一个由上传队列中的文件对象组成的数组
settings当前的配置参数对象
total表示总体进度信息的QueueProgress对象

官方网站：https://www.plupload.com/

soliderzzz
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
plupload-3.1.2.zip
06-29
plupload资源，比较好用的前端上传插件，开源插件，支持阿里云上传、分片上传，自己做个备份，官网资源下载。
plupload-2.3.6.zip
08-05
主要使用plupload插件实现多图的上传、视频分片上传等
【文件管理】关于上传下载文件的设计
最新发布
x_chengqq
02-29 798
这里主要谈论的是产品设计里面的文件管理，比如文件的上传交互及背后影响到的前后端设计。
yii2-plupload:Yii2 插件扩展
07-13
yii2-plupload Yii2 扩展，提供简单的小部件。 安装 通过 composer 安装包： composer require soju/yii2-plupload:dev-master 演示模块 将此添加到您的模块配置中： 'plupload' => [ 'class' => 'soju\yii2plupload\Module' , ], 然后去http://your-app/plupload 用法 <?= \soju\yii2plupload\widgets\ UIWidget :: widget ([ 'settings' =>[ 'url' =>[ '/controller/action' ], ], ]); ?>
java_分段上传_断点续传_超大附件上传spring-fileupload-plupload-mysql
01-08
一个可以运行的项目，关于大附件上传这块的关键技术，在mysql中创建 upload 数据库，导入sql文件，运行项目，修改 database.java 文件下的数据库密码，就实现了超大附件的分片上传，每个方法的功能都写着注解呢，个根据需要做断点续传功能！ 后端导了fileupload的jar包 前端用了plupload的js插件 没有加mybatis和spring更具需要自己加 如果满意可以请评论点赞
plupload.full.min.js
03-31
plupload.full.min.js插件。用于实现PHP+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片，然后图片自动上传到服务器上并立即显示在页面上。参考 http://blog.csdn.net/u014175572/article/details/51027626
Plupload 上传控件使用指南
weixin_30457551的博客
08-26 1114
本文转载至(感谢原作者分享)：http://www.cnblogs.com/2050/p/3913184.html#plupload_doc2 我之前写过一篇文章《文件上传利器SWFUpload使用指南》，里面介绍了上传组件SWFUpload的使用方法，但现在随着html5技术的逐渐推广和普及，再去使用以flash为上传手段的SWFUpload显然就有点过时了，毕竟html5原生的就给我们提...
plupload附件上传插件中文文档及使用总结
ruanhongbiao的专栏
04-27 4916
1.关于上传方式： 一般PC端使用选择文件后再点击按钮上传，把上传方法uploader.start()写在初始化的方法init里； 移动端选择图片后直接上传，把上传方法uploader.start()写在FilesAdded里 2.把错误提示文字改成中文： 在plupload.full.min.js文件搜索报错码对应的属性名，然后找到报错的英文改成中文即可   3.在IE上的兼容性问题...
七牛 使用plupload.full.min.js上传文件的大小写
weixin_34128534的博客
08-22 1632
2019独角兽企业重金招聘Python工程师标准>>> ...
Plupload上传插件详解，多实例上传
a281246240的专栏
04-08 6268
我们来看一个比较全的  Plupload  Demo charset="UTF-8"> Plupload使用指南 src="js/plupload.full.min.js"> id="browse">选择文件 id="start_upload">开始上传 //实例化一个plupl
PLUPLOAD插件 ━━ 上传总结(分片上传，php后端处理）
暂时先用这个名字
04-06 1198
plupload插件官方地址：plupload官方网站 参数，方法，设置说明文档地址：配置文档 前端 使用方法： <!-- 引入plupload文件 --> <!-- moxie用来生成图片缩略图 --> <script src="./plupload/js/moxie.js"></script> <script src="./plupload/js/plupload.full.min.js"></script> <script
兼容IE6+的文件上传控件plupload工具包
06-04
兼容IE6+的文件上传控件plupload工具包，支持htm5的浏览器上能够进行拖拽文件上传，不支持的html5的同样支持上传功能，兼容谷歌、火狐，iE6，iE7，iE8，IE9，iE10等
plupload-2.3.6
01-08
plupload工具类，包含基础示例和js文件，包文件，以及所用到的所有相关控件
IE10以下如何使用WebUploader
sinat_41607256的博客
01-28 220
本文只针对IE内核的浏览器！！！ 2021年1月12号，flash停服，一时间公司的多文件上传组件挂了很多，在这患难关头，笔者挺身而出，搜集了几个文件上传组件，组件名称以及参考文档如下： WebUploader（支持多文件，需要ie6++）：http://fex.baidu.com/webuploader/ plupload（只支持单文件，可以支持ie6+）：https://www.cnblogs.com/2050/p/3913184.html Stream（支持多文件，官方称支持ie7+，实际尝试
plupload 不兼容ie8_如何处理网站兼容性
weixin_39827589的博客
11-29 200
点击上方蓝字给一个关注吧 点击上方关注我们!市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js引擎，内核更加倾向于说渲染引擎。常见的浏览器内核可以分四种：Trident、Gecko、Blink、WebkitIE浏览器：Trident内核，也称为IE内核;Chrome浏...
【Plupload插件】基础使用教程
weixin_44707049的博客
04-13 5122
前言 Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件，简单易用且功能强大。 特点 拥有多种上传方式：HTML5、flash、silverlight以及传统的。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。 支持以拖拽的方式来选取要上传的文件 支持在前端压缩图片，即在图片文件还未上传之前就对它进行压缩 可以直接读取原生的文件数据，这样的好处就
swf使用flash的替换方案
Ayding艾丁的博客
09-20 881
公司一些老应用中使用到flash来播放一些swf的动画，但是目前大多浏览器已经不再支持flash了。于是找寻flash的替代品。
前端上传组件Plupload使用指南
juziaixiao的博客
06-17 945
Plupload有以下功能和特点： 1、拥有多种上传方式：HTML5、flash、silverlight以及传统的。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。 2、支持以拖拽的方式来选取要上传的文件 3、支持在前端压缩图片，即在图片文件还未上传之前就对它进行压缩 4、可以直接读取原生的文件数据，这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览 5
免Flash文件上传 (Upload without Flash)
Ziuc的博客
09-07 2050
免Flash文件上传 (Upload without Flash) 无需调用Flash，不必为了传作业多装一个浏览器！ 支持多文件上传！ 支持拖拽文件上传！ 支持上传进度实时显示！ 一键跳转到课程作业界面！ 支持所有编辑器界面中的文件上传操作！ 三步上手使用： ① 安装 Tampermonkey：www.Tampermonkey.net （Chrome浏览器需科学上网） ② 导入脚本：免Flash文件上传 （点击“安装此脚本”） ③ Enjoy it ！ 使用效果： ① 增加了标签“上传作业”，一键从课程列
plupload下载
10-25
plupload是一个基于HTML5和Flash技术的开源文件上传组件，它不仅可以用于上传文件，还可以用于下载文件。 使用plupload进行下载，首先需要构建一个下载按钮，并为其绑定点击事件。当用户点击下载按钮时，可以通过调用plupload的API方法，向服务器发送下载请求。服务器收到下载请求后，可以将对应的文件发送给客户端进行下载。 在plupload中，可以使用settings对象的url属性来指定下载的服务器地址。可以自定义一个下载接口，当plupload发送下载请求时，该接口负责根据请求中的参数，获取文件的路径，读取文件内容，并发送给客户端进行下载。 例如，构建一个下载按钮的示例代码如下： ```html <button id="downloadBtn">下载文件</button> <script src="plupload.js"></script> <script> // 绑定下载按钮点击事件 document.getElementById('downloadBtn').addEventListener('click', function() { // 使用plupload的API方法发送下载请求 plupload.addFile({ name: 'filename.ext', // 文件名 url: 'download.php' // 下载接口地址 }); }); </script> ``` 在download.php文件中，可以获取到plupload发送的下载请求，根据请求中的参数，读取对应的文件，并将文件内容发送给客户端。下载文件的代码如下： ```php <?php $filename = $_GET['filename']; // 获取下载文件名 // 设置响应头信息，告诉浏览器下载文件 header('Content-Disposition: attachment; filename='.$filename); header('Content-Type: application/octet-stream'); header('Content-Transfer-Encoding: binary'); header('Content-Length: '. filesize($filename)); // 输出文件内容 readfile($filename); ?> ``` 以上就是使用plupload进行文件下载的简单示例。当用户点击下载按钮时，plupload将发送下载请求到download.php接口，该接口会读取文件内容并发送给客户端，实现文件下载功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值