Plupload上传插件简单整理
Plupload
Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件。Plupload 目前分为一个核心API 和一个jQuery上传队列部件,这样使你可以直接使用或是自己定制。
功能和特点:
1、拥有多种上传方式:HTML5、flash、silverlight以及传统的<input type=”file” />
。Plupload会自动侦测当前的环境,选择最合适的上传方式,并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式,Plupload会自动为你选择最合适的方式。
2、支持以拖拽的方式来选取要上传的文件
3、支持在前端压缩图片,即在图片文件还未上传之前就对它进行压缩
4、可以直接读取原生的文件数据,这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览
5、支持把大文件切割成小片进行上传,因为有些浏览器对很大的文件比如几G的一些文件无法上传。
6、支持文件过滤上传
依赖及兼容
依赖性
不依赖于任何库和框架
兼容性
支持Firefox、Chrome、 Safari、 IE6,7,8,9,10,11
注意:
1、分块:chrome和firefox 4+ 支持。
2、拖拽适用于firefox和webkit内核的浏览器,windows版的safari还存在一些问题待解决。
3、图片缩放仅在firefox3.5+和chrome上支持,safari/opera 不支持直接数据访问选定的文件。
4、 多文件上传仅支持gecko和webkit内核的浏览器。
安装使用
1.引用
plupload的源文件可以到github上去下载,然后通过script
标签引用:
<script src="js/plupload.full.min.js"></script>
2.初始化
var uploader = new plupload.Uploader({
browse_button: 'browse', //触发文件选择对话框的按钮,为那个元素id或者元素本身
url: 'upload.php' //文件上传url地址
});
uploader.init();
常用案例
1.文件普通上传
var uploader = new plupload.Uploader({
browse_button: 'browse', //触发文件选择对话框的按钮,为那个元素id或者元素本身
url: 'upload.php' //文件上传url地址
});
uploader.init()
document.getElementById('uploadfiles').onclick = function() {
uploader.start();
return false;
};
2.文件拖拽上传
配置参数:drop_element
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
drop_element |
DOM/String/Array | 指定了使用拖拽方式来选择上传文件时的拖拽区域,即可以把文件拖拽到这个区域的方式来选择文件。该参数的值可以为一个DOM元素的id,也可是 DOM元素本身,还可以是一个包括多个DOM元素的数组。如果不设置该参数则拖拽上传功能不可用。目前只有html5上传方式才支持拖拽上传。 |
代码示例:
var uploader = new plupload.Uploader({
browse_button: 'browse', //触发文件选择对话框的按钮,为那个元素id或者元素本身
url: 'upload.php' //文件上传url地址
drop_element: 'drop', //拖拽区域元素ID或者元素本身
});
uploader.init();
document.getElementById('uploadfiles').onclick = function() {
uploader.start();
return false;
};
3.图片压缩上传
配置参数:resize
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
resize |
Object | 可以使用该参数对将要上传的图片进行压缩,该参数是一个对象,里面包括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} |
代码示例:
var uploader = new plupload.Uploader({
browse_button: 'browse', //触发文件选择对话框的按钮,为那个元素id或者元素本身
url: 'upload.php' //文件上传url地址
resize: {
width: 100,
height: 100,
crop: true,
quality: 60,
preserve_headers: false
}
});
uploader.init();
document.getElementById('uploadfiles').onclick = function() {
uploader.start();
return false;
};
4.文件过滤上传
配置参数:filters
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
filters |
Object | {} | 可以使用该参数来限制上传文件的类型,大小等,该参数以对象的形式传入,它包括三个属性: 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 //不允许选取重复文件} |
代码示例:
var uploader = new plupload.Uploader({
browse_button: 'browse', // this can be an id of a DOM element or the DOM element itself
url: 'upload.php',
filters: {
mime_types: [ //只允许上传图片和zip文件
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
],
max_file_size: '400kb', //最大只能上传400kb的文件
prevent_duplicates: true //不允许选取重复文件
}
});
uploader.init();
document.getElementById('start-upload').onclick = function () {
uploader.start();
};
5.文件分片上传
配置参数: chunk_size
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
chunk_size |
Number/String | 0 | 分片上传文件时,每片文件被切割成的大小,为数字时单位为字节。也可以使用一个带单位的字符串,如"200kb"。当该值为0时表示不使用分片上传功能 |
代码示例:
var uploader = new plupload.Uploader({
browse_button: 'browse', //触发文件选择对话框的按钮,为那个元素id或者元素本身
url: 'upload.php' //文件上传url地址
chunk_size: '200kb', //拖拽区域元素ID或者元素本身
});
uploader.init();
document.getElementById('uploadfiles').onclick = function() {
uploader.start();
return false;
};
常用事件
1.UploadProgress
会在文件上传过程中不断触发,可以用此事件来显示上传进度监听函数参数:(uploader,file)
uploader为当前的plupload实例对象,file为触发此事件的文件对象
2.FilesRemoved
当文件从上传队列移除后触发监听函数参数:(uploader,files)
uploader为当前的plupload实例对象,files为一个数组,里面的元素为本次事件所移除的文件对象
3.FilesAdded
当文件添加到上传队列后触发监听函数参数:(uploader,files)
uploader为当前的plupload实例对象,files为一个数组,里面的元素为本次添加到上传队列里的文件对象
4.FileUploaded
当队列中的某一个文件上传完成后触发监听函数参数:(uploader,file,responseObject)
uploader为当前的plupload实例对象,file为触发此事件的文件对象,responseObject为服务器返回的信息对象,它有以下3个属性:
response:服务器返回的文本
responseHeaders:服务器返回的头信息
status:服务器返回的http状态码,比如200
5.UploadComplete
当上传队列中所有文件都上传完成后触发监听函数参数:(uploader,files)
uploader为当前的plupload实例对象,files为一个数组,里面的元素为本次已完成上传的所有文件对象
6.Error:
当发生错误时触发监听函数参数:(uploader,errObject)
uploader为当前的plupload实例对象,errObject为错误对象,它至少包含以下3个属性(因为不同类型的错误,属性可能会不同):
code:错误代码,具体请参考plupload上定义的表示错误代码的常量属性
file:与该错误相关的文件对象
message:错误信息
Plupload实例的属性和方法
1.属性
属性 | 描述 |
---|---|
id | Plupload实例的唯一标识id |
state | 当前的上传状态,可能的值为plupload.STARTED 或plupload.STOPPED ,该值由Plupload实例的stop()``或 statr()方法控制。默认为 plupload.STOPPED` |
runtime | 当前使用的上传方式 |
files | 当前的上传队列,是一个由上传队列中的文件对象组成的数组 |
settings | 当前的配置参数对象 |
total | 表示总体进度信息的QueueProgress对象 |
2.方法
方法 | 描述 |
---|---|
init() | 初始化Plupload实例 |
setOption(option, [value]) | 设置某个特定的配置参数,option为参数名称,value为要设置的参数值。option也可以为一个由参数名和参数值键/值对组成的对象,这样就可以一次设定多个参数,此时该方法的第二个参数value会被忽略。 |
getOption([option]) | 获取当前的配置参数,参数option为需要获取的配置参数名称,如果没有指定option,则会获取所有的配置参数 |
start() | 开始上传队列中的文件 |
stop() | 停止队列中的文件上传 |
getFile(id) | 通过id来获取文件对象 |
addFile(file, [fileName]) | 向上传队列中添加文件,如果成功添加了文件,会触发FilesAdded 事件。参数file 为要添加的文件,可以是一个原生的文件,或者一个plupload 文件对象,或者一个input[type="file"] 元素,还可以是一个包括前面那几种东西的数组;fileName为给该文件指定的名称 |
removeFile(file) | 从上传队列中移除文件,参数file为plupload文件对象或先前指定的文件名称 |
splice(start, length) | 从上传队列中移除一部分文件,start 为开始移除文件在队列中的索引,length 为要移除的文件的数量,该方法的返回值为被移除的文件。该方法会触发FilesRemoved 和QueueChanged 事件 |
trigger(name, Multiple) | 触发某个事件。name 为要触发的事件名称,Multiple 为传给该事件监听函数的参数,是一个对象 |
hasEventListener(name) | 用来判断某个事件是否有监听函数,`name为``事件名称 |
bind(name, func, scope) | 给某个事件绑定监听函数,name 为事件名,func 为监听函数,scope 为监听函数的作用域,也就是监听函数中this的指 |
unbind(name, func) | 移除事件的监听函数,name 为事件名称,func 为要移除的监听函数 |
unbindAll() | 移除所有事件的所有监听函数 |
destroy() | 销毁plupload实例 |
QueueProgress 对象的属性
plupload实例的total属性是一个QueueProgress对象
属性 | 描述 |
---|---|
size | 上传队列中所有文件加起来的总大小,单位为字节 |
loaded | 队列中当前已上传文件加起来的总大小,单位为字节 |
uploaded | 已完成上传的文件的数量 |
failed | 上传失败的文件数量 |
queued | 队列中剩下的(也就是除开已经完成上传的文件)需要上传的文件数量 |
percent | 整个队列的已上传百分比,如50就代表50% |
bytesPerSec | 上传速率,单位为 byte/s,也就是 字节/秒 |
文件对象的属性和方法
在很多事件监听函数中,都会提供文件对象给你
属性/方法 | 描述 |
---|---|
id | 文件id |
name | 文件名,例如”myfile.gif” |
type | 文件类型,例如”image/jpeg” |
size | 文件大小,单位为字节,当启用了客户端压缩功能后,该值可能会改变 |
origSize | 文件的原始大小,单位为字节 |
loaded | 文件已上传部分的大小,单位为字节 |
percent | 文件已上传部分所占的百分比,如50就代表已上传了50% |
status | 文件的状态,可能为以下几个值之一:plupload.QUEUED , plupload.UPLOADING , plupload.FAILED , plupload.DONE |
lastModifiedDate | 文件最后修改的时间 |
getNative() | 获取原生的文件对象 |
getSource() | 获取mOxie.File 对象,想了解mOxie是什么东西,可以看下https://github.com/moxiecode/moxie/wiki/API |
destroy() | 销毁文件对象 |
参考资料
Plupload上传插件简单整理的更多相关文章
- Plupload上传插件中文帮助文档
Plupload上传插件中文帮助文档 配置参数 实例化一个plupload对象时,也就是 new plupload.Uploader(),需要传入一个对象作为配置参数.后面内容中出现的plupload ...
- Plupload上传插件中文文档
Plupload上传插件中文帮助文档 如有疑问,加群交流:646104701 下载地址:https://www.plupload.com/download/ 配置参数 实例化一个plupload对象时 ...
- plupload上传插件在SpringMVC中的整合
前言:近期在给学院的站点做一个加入附件的功能,首先到了某某邮箱看了一下.简单有用.可是是flash做的,无法拷贝.就仅仅好上网找插件了.经过筛选.最终找到plupload这款插件(其实有的编辑器自带加 ...
- pupload上传插件问题整理
前些日子公司网站需要开发一个类似与百度文库上传文档的功能,实现文档的批量上传.展示以及继续上传的功能.开发完成后,通过在多版浏览器下的使用,发现了一系列问题,特总结于下,以免来者在这些问题上耗费太多时 ...
- Plupload上传插件自定义图片的修改
若自定义的一个上传图片效果,代码(可能不全),当用户再次点击所有或任意一个上传图片的input时,uploader.files已经多了客户再次上传的图片,但是你就想要最后的两张图片,这就可以使用到up ...
- jQuery File Upload文件上传插件简单使用
前言 开发过程中有时候需要用户在前段上传图片信息,我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片,当我们点击submit按钮的时候,图片信息就 ...
- JQuery上传插件uploadify整理(Events)
Arguments fileThe file object being cancelled onCancel:调用calcel方法.$('#upload').uploadify('cancel'); ...
- JQuery上传插件uploadify整理(Options)
下载 现在有两个版本了,我此次使用的依然是Flash版本的,虽然现在绝大部分浏览器都兼容HTMKL5,目前位置,除了做手机项目外,一般我们项目中不允许使用HTML5标签. 属性介绍(Options) ...
- jquery plupload上传插件
http://www.jianshu.com/p/047349275cd4 http://www.cnblogs.com/2050/p/3913184.html demo地址: http://chap ...
随机推荐
- PAT乙级 1065. 单身狗(25) by Python
1065. 单身狗(25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue "单身狗"是中文对 ...
- bootstrap 响应式工具
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Omi教程-通讯通讯攻略大全
组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点 通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射) 父容器设 ...
- gridView 主从表实现
1.主要代码: private void Form2_Load(object sender, EventArgs e) { DataTable dt1 = new DataTable("dt ...
- table标签中thead、tbody、tfoot的作用
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示.如果表格很长,用tbody分段,可以一部分一部分地显示, ...
- SVN 中trunk、branches、tags的详解
1.trunk是主分支,是日常开发进行的地方.2.branches是分支.一些阶段性的release版本,这些版本是可以继续进行开发和维护的,则放在branches目录中.又比如为不同用户客制化的版本 ...
- cocoapods 删除已导入项目的第三方库和移除项目中的cocoapods
第一部分将介绍如何删除项目中已经由cocoapods配置好的第三方 1.打开项目中的Podfile文件 2.删除选中的pod Snapkit的命令行3.打开终端cd到当前项目的根目录下重新执行pod ...
- Cocos2d-x shader学习1: 灰度shader
灰度shader 最近在学习shader,就把cocos2d-x 3.x版本中的很简单也很常用的灰度shader拿出来学习一下. #ifdef GL_ES precision mediump floa ...
- ajax 实现三级联动
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...
- 个人C++学习路线
这段时间学习<<C++ primer >> 第四版,一边学一遍考虑,要怎么样往深处学习.查了网上的学习路线,知乎大神的问题回答,整理了一下思路,如下吧: <<C++ ...