前端上传组件Plupload使用指南 与swfupload一样强大
来源:互联网 发布:苏联冷战战败 知乎 编辑:程序博客网 时间:2024/05/22 14:52
Plupload有以下功能和特点:
1、拥有多种上传方式:HTML5、flash、silverlight以及传统的<input type=”file” />。Plupload会自动侦测当前的环境,选择最合适的上传方式,并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式,Plupload会自动为你选择最合适的方式。
2、支持以拖拽的方式来选取要上传的文件
3、支持在前端压缩图片,即在图片文件还未上传之前就对它进行压缩
4、可以直接读取原生的文件数据,这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览
5、支持把大文件切割成小片进行上传,因为有些浏览器对很大的文件比如几G的一些文件无法上传。
Plupload的使用方法也与SWFUpload非常类似,可以分为以下几步:
1、引入js文件
2、实例化一个plupload对象,传入一个配置参数对象进行各方面的配置。
3、调用plupload实例对象的init()方法进行初始化
4、在plupload实例对象上注册各种你需要的事件。plupload从选取文件到文件上传完成这个过程中,会触发很多事件。我们可以通过这些事件来跟plupload进行交互。
5、实现你自己所注册的那些事件的监听函数,利用这些监听函数来进行更新UI、提示上传进度等工作。
大家可以到http://chaping.github.io/plupload/demo/看一下我写的关于plupload的几个上传demo。
下面用一段代码来说明Plupload的使用方法。
首先看下我的目录结构
index.html的代码如下:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Plupload使用指南</title> <!-- 首先需要引入plupload的源代码 --> <script src="js/plupload.full.min.js"></script></head><body> <!-- 这里我们只使用最基本的html结构:一个选择文件的按钮,一个开始上传文件的按钮(甚至该按钮也可以不要) --> <p> <button id="browse">选择文件</button> <button id="start_upload">开始上传</button> </p> <script> //实例化一个plupload上传对象 var uploader = new plupload.Uploader({ browse_button : 'browse', //触发文件选择对话框的按钮,为那个元素id url : 'upload.php', //服务器端的上传页面地址 flash_swf_url : 'js/Moxie.swf', //swf文件,当需要使用swf方式进行上传时需要配置该参数 silverlight_xap_url : 'js/Moxie.xap' //silverlight文件,当需要使用silverlight方式进行上传时需要配置该参数 }); //在实例对象上调用init()方法进行初始化 uploader.init(); //绑定各种事件,并在事件监听函数中做你想做的事 uploader.bind('FilesAdded',function(uploader,files){ //每个事件监听函数都会传入一些很有用的参数, //我们可以利用这些参数提供的信息来做比如更新UI,提示上传进度等操作 }); uploader.bind('UploadProgress',function(uploader,file){ //每个事件监听函数都会传入一些很有用的参数, //我们可以利用这些参数提供的信息来做比如更新UI,提示上传进度等操作 }); //...... //...... //最后给"开始上传"按钮注册事件 document.getElementById('start_upload').onclick = function(){ uploader.start(); //调用实例对象的start()方法开始上传文件,当然你也可以在其他地方调用该方法 } </script></body></html>
使用Plupload的关键是了解它众多的配置参数、事件以及属性和方法。我把它官网上的文档翻译成了中文并整理如下。我也把它放到了github上,你可以到http://chaping.github.io/plupload/doc/去查阅。
目录:
一、配置参数
二、各种事件说明
三、Plupload实例的属性
四、Plupload实例的方法
五、文件对象的属性和方法
六、QueueProgress 对象的属性
七、plupload命名空间上的一些属性
一、配置参数
实例化一个plupload对象时,也就是 new plupload.Uploader()
,需要传入一个对象作为配置参数。后面内容中出现的plupload实例均是指new plupload.Uploader()
得到的实例对象
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 //不允许选取重复文件}
true
时将以multipart/form-data
的形式来上传文件,为false时则以二进制的格式来上传文件。html4上传方式不支持以二进制格式来上传文件,在flash上传方式中,二进制上传也有点问题。并且二进制格式上传还需要在服务器端做特殊的处理。一般我们用multipart/form-data的形式来上传文件就足够了。multipart_params: { one: '1', two: '2', three: { //值还可以是一个字面量对象 a: '4', b: '5' }, four: ['6', '7', '8'] //也可以是一个数组}
plupload.HTTP_ERROR
错误时的重试次数,为0时表示不重试"200kb"
。当该值为0时表示不使用分片上传功能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}
name
,值为生成的文件名。silverlight,
html4用来指定上传方式,指定多个上传方式请使用逗号隔开。一般情况下,你不需要配置该参数,因为Plupload默认会根据你的其他的参数配置来选择最合适的上传方式。如果没有特殊要求的话,Plupload会首先选择html5上传方式,如果浏览器不支持html5,则会使用flash或silverlight,如果前面两者也都不支持,则会使用最传统的html4上传方式。如果你想指定使用某个上传方式,或改变上传方式的优先顺序,则你可以配置该参数。
file
,例如在php中你可以使用$_FILES['file']
来获取上传的文件信息browse_button
的父元素。该参数的值可以是一个元素的id,也可以是DOM元素本身。二、各种事件说明
要了解plupload的运行状况,靠的就是在这些事件了
监听函数参数:(uploader)
uploader
为当前的plupload实例对象
监听函数参数:(uploader)
uploader
为当前的plupload实例对象
监听函数参数:(uploader,option_name,new_value,old_value)
uploader
为当前的plupload实例对象,option_name
为发生改变的参数名称,new_value
为改变后的值,old_value
为改变前的值
监听函数参数:(uploader)
uploader
为当前的plupload实例对象
监听函数参数:(uploader)
uploader
为当前的plupload实例对象
监听函数参数:(uploader,file)
uploader
为当前的plupload实例对象,file
为触发此事件的文件对象
监听函数参数:(uploader,file)
uploader
为当前的plupload实例对象,file
为触发此事件的文件对象
监听函数参数:(uploader)
uploader
为当前的plupload实例对象
监听函数参数:(uploader,file)
uploader
为当前的plupload实例对象,file
为触发此事件的文件对象
监听函数参数:(uploader,files)
uploader
为当前的plupload实例对象,files
为一个数组,里面的元素为本次事件所移除的文件对象
监听函数参数:(uploader,file)
uploader
为当前的plupload实例对象,file
为触发此事件的文件对象
监听函数参数:(uploader,files)
uploader
为当前的plupload实例对象,files
为一个数组,里面的元素为本次添加到上传队列里的文件对象
监听函数参数:(uploader,file,responseObject)
uploader
为当前的plupload实例对象,file
为触发此事件的文件对象,responseObject
为服务器返回的信息对象,它有以下3个属性:
response:服务器返回的文本
responseHeaders:服务器返回的头信息
status:服务器返回的http状态码,比如200
监听函数参数:(uploader,file,responseObject)
uploader
为当前的plupload实例对象,file
为触发此事件的文件对象,responseObject
为服务器返回的信息对象,它有以下5个属性:
offset:该文件小片在整体文件中的偏移量
response:服务器返回的文本
responseHeaders:服务器返回的头信息
status:服务器返回的http状态码,比如200
total:该文件(指的是被切割成了许多文件小片的那个文件)的总大小,单位为字节
监听函数参数:(uploader,files)
uploader
为当前的plupload实例对象,files
为一个数组,里面的元素为本次已完成上传的所有文件对象
监听函数参数:(uploader,errObject)
uploader
为当前的plupload实例对象,errObject
为错误对象,它至少包含以下3个属性(因为不同类型的错误,属性可能会不同):
code:错误代码,具体请参考plupload上定义的表示错误代码的常量属性
file:与该错误相关的文件对象
message:错误信息
监听函数参数:(uploader)
uploader
为当前的plupload实例对象
三、Plupload实例的属性
plupload.STARTED
或plupload.STOPPED
,该值由Plupload实例的stop()
或statr()
方法控制。默认为plupload.STOPPED
四、Plupload实例的方法
disable
为true
时为禁用,为false
时为启用。默认为true
FilesAdded
事件。参数file为要添加的文件,可以是一个原生的文件,或者一个plupload文件对象,或者一个input[type="file"]
元素,还可以是一个包括前面那几种东西的数组;fileName为给该文件指定的名称file
为plupload文件对象或先前指定的文件名称start
为开始移除文件在队列中的索引,length
为要移除的文件的数量,该方法的返回值为被移除的文件。该方法会触发FilesRemoved
和QueueChanged
事件name
为要触发的事件名称,Multiple
为传给该事件监听函数的参数,是一个对象name
为事件名称name
为事件名,func
为监听函数,scope
为监听函数的作用域,也就是监听函数中this的指向name
为事件名称,func
为要移除的监听函数五、文件对象的属性和方法
在很多事件监听函数中,都会提供文件对象给你
plupload.QUEUED
, plupload.UPLOADING
,plupload.FAILED
, plupload.DONE
六、QueueProgress 对象的属性
plupload实例的total属性是一个QueueProgress对象
七、plupload命名空间上的一些属性
plupload的命名空间上有一些属性,用来表示一些常量。记住,不是plupload实例的属性,而是plupload的属性
state
属性值state
属性值status
属性值status
属性值status
属性值status
属性值- 顶
- 踩
- 前端上传组件Plupload使用指南 与swfupload一样强大
- 前端上传组件Plupload使用指南 与swfupload一样强大
- 前端上传组件Plupload使用指南 与swfupload一样强大
- 前端上传组件Plupload使用指南 与swfupload一样强大
- 前端上传组件Plupload使用指南
- 前端上传组件Plupload使用指南
- 前端上传组件Plupload使用指南
- 前端上传组件Plupload使用指南
- 前端上传组件Plupload使用指南
- 前端上传组件Plupload使用指南
- 前端上传组件Plupload使用指南
- 前端上传组件Plupload使用指南
- 前端上传组件Plupload使用指南
- 前端上传组件Plupload使用指南
- 前端上传组件Plupload使用指南(支持多文件选择上传)
- 前端上传组件Plupload
- 前端上传组件Plupload
- plupload一个前端上传组件
- retrofit 完全解释,注解详细说明。
- 自定义线程的创建方式
- Servlet-Jsp、EL、JSTL
- android app 加固后 重新签名
- Java设计模式透析之 —— 单例(Singleton)
- 前端上传组件Plupload使用指南 与swfupload一样强大
- 用FlexGrid做开发,轻松处理百万级表格数据
- Android扫描sd卡和系统文件
- HTTP网络基础
- 集合遍历
- 计算机图形学-Code 3
- [LeetCode]--415. Add Strings
- yeelink arduion post以太数据包分析
- 更方便的将各个 rom 厂商自己的推送服务进行集成,并统一管理