Plupload上传插件简单整理

Plupload是有TinyMCE的开发者开发的，为您的内容管理系统或是类似上传程序提供⼀个⾼度可⽤的上传插件。Plupload ⽬前分为⼀个核⼼API 和⼀个jQuery上传队列部件，这样使你可以直接使⽤或是⾃⼰定制。功能和特点：

1、拥有多种上传⽅式：HTML5、flash、silverlight以及传统的。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的源⽂件可以到上去下载，然后通过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

默认值

属性类型描述

指定了使⽤拖拽⽅式来选择上传⽂件时的拖拽区域，即可以把⽂件拖拽到这个区域的⽅式来选择⽂件。该参数的值可以为⼀个DOM元素的id,也可是 DOM元素本⾝，还可以是⼀个包括多个DOM元素的数组。如果不设置该参数则拖拽上传功能不可⽤。⽬前只有html5上传⽅式才⽀持拖拽上传。

drop_elementDOM/String/Array

代码⽰例：

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属性类型

默认值

描述

可以使⽤该参数对将要上传的图⽚进⾏压缩，该参数是⼀个对象，⾥⾯包括5个属性：

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

属性类型

resizeObject

默认

值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属性

默类型认

值

描述

可以使⽤该参数来上传⽂件的类型，⼤⼩等，该参数以对象的形式传⼊，它包括三个属性：

mime_types：⽤来限定上传⽂件的类型，为⼀个数组，该数组的每个元素⼜是⼀个对象，该对象有title和extensions两个属性，title为该过滤器的名称，extensions为⽂件扩展名，有多个时⽤

开。该属性默认为⼀个空数组，即不做。

filters

Object{}max_file_size：⽤来限定上传⽂件的⼤⼩，如果⽂件体积超过了该值，则不能被选取。值可以为⼀个数字，单位为b,也可以是⼀个字符串，由数字和单位组成，如’200kb’。

prevent_duplicates：是否允许选取重复的⽂件，为true时表⽰不允许，为false时表⽰允许，默认为false。如果两个⽂件的⽂件名和⼤⼩都相同，则会被认为是重复的⽂件filters完整的配置⽰例如下(当然也可以只配置其中的某⼀项)：

filters: {mime_types : [ //只允许上传图⽚和zip⽂件{ title : \"Image files\最⼤只能上传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\ { title: \"Zip files\ ],

max_file_size: '400kb', //最⼤只能上传400kb的⽂件 prevent_duplicates: true //不允许选取重复⽂件 }

});

uploader.init();

document.getElementById('start-upload').onclick = function () { uploader.start(); };

5.⽂件分⽚上传配置参数： chunk_size属性

类型

默认值0

描述

分⽚上传⽂件时，每⽚⽂件被切割成的⼤⼩，为数字时单位为字节。也可以使⽤⼀个带单位的字符串，如\"200kb\"。当该值为0时表⽰不使⽤分⽚上传功能

chunk_sizeNumber/String

代码⽰例：

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状态码，⽐如2005.UploadComplete

当上传队列中所有⽂件都上传完成后触发监听函数参数：(uploader,files)

uploader为当前的plupload实例对象，files为⼀个数组，⾥⾯的元素为本次已完成上传的所有⽂件对象6.Error：

当发⽣错误时触发监听函数参数：(uploader,errObject)

uploader为当前的plupload实例对象，errObject为错误对象，它⾄少包含以下3个属性(因为不同类型的错误，属性可能会不同)：code：错误代码，具体请参考plupload上定义的表⽰错误代码的常量属性file：与该错误相关的⽂件对象message：错误信息

Plupload实例的属性和⽅法

1.属性属性idstatefilestotal2.⽅法⽅法init()

setOption(option,[value])

getOption([option])start()stop()getFile(id)

addFile(file, [fileName])removeFile(file)splice(start, length)trigger(name, Multiple)

描述

初始化Plupload实例

设置某个特定的配置参数,option为参数名称，value为要设置的参数值。option也可以为⼀个由参数名和参数值键/值对组成的对象，这样就可以⼀次设定多个参数，此时该⽅法的第⼆个参数value会被忽略。

获取当前的配置参数，参数option为需要获取的配置参数名称，如果没有指定option，则会获取所有的配置参数开始上传队列中的⽂件停⽌队列中的⽂件上传通过id来获取⽂件对象

向上传队列中添加⽂件，如果成功添加了⽂件，会触发FilesAdded事件。参数file为要添加的⽂件,可以是⼀个原⽣的⽂件,或者⼀个plupload⽂件对象,或者⼀个input[type=\"file\"]元素,还可以是⼀个包括前⾯那⼏种东西的数组；fileName为给该⽂件指定的名称从上传队列中移除⽂件，参数file为plupload⽂件对象或先前指定的⽂件名称

从上传队列中移除⼀部分⽂件，start为开始移除⽂件在队列中的索引，length为要移除的⽂件的数量，该⽅法的返回值为被移除的⽂件。该⽅法会触发FilesRemoved 和QueueChanged事件

触发某个事件。name为要触发的事件名称，Multiple为传给该事件监听函数的参数，是⼀个对象

描述

Plupload实例的唯⼀标识id

当前的上传状态，可能的值为plupload.STARTED或plupload.STOPPED，该值由Plupload实例的stop()``或statr()⽅法控制。默认为plupload.STOPPED`当前的上传队列，是⼀个由上传队列中的⽂件对象组成的数组表⽰总体进度信息的QueueProgress对象

runtime当前使⽤的上传⽅式settings当前的配置参数对象

hasEventListener(name)⽤来判断某个事件是否有监听函数，`name为``事件名称

bind(name, func, scope)给某个事件绑定监听函数，name为事件名，func为监听函数，scope为监听函数的作⽤域，也就是监听函数中this的指unbind(name, func)unbindAll()destroy()

移除事件的监听函数，name为事件名称，func为要移除的监听函数移除所有事件的所有监听函数销毁plupload实例

QueueProgress 对象的属性

plupload实例的total属性是⼀个QueueProgress对象属性sizeloadeduploadedfailedqueuedpercent

描述

上传队列中所有⽂件加起来的总⼤⼩，单位为字节队列中当前已上传⽂件加起来的总⼤⼩,单位为字节已完成上传的⽂件的数量上传失败的⽂件数量

队列中剩下的(也就是除开已经完成上传的⽂件)需要上传的⽂件数量整个队列的已上传百分⽐，如50就代表50%

bytesPerSec上传速率，单位为 byte/s，也就是 字节/秒

⽂件对象的属性和⽅法

在很多事件监听函数中，都会提供⽂件对象给你属性/⽅法idnametypesizeorigSizeloadedpercent

描述⽂件id

⽂件名，例如”myfile.gif”⽂件类型，例如”image/jpeg”

⽂件⼤⼩，单位为字节，当启⽤了客户端压缩功能后，该值可能会改变⽂件的原始⼤⼩，单位为字节⽂件已上传部分的⼤⼩，单位为字节

⽂件已上传部分所占的百分⽐，如50就代表已上传了50%

status⽂件的状态，可能为以下⼏个值之⼀：plupload.QUEUED, plupload.UPLOADING, plupload.FAILED, plupload.DONE属性/⽅法描述

lastModifiedDate⽂件最后修改的时间getNative()getSource()destroy()

获取原⽣的⽂件对象

获取mOxie.File 对象，想了解mOxie是什么东西，可以看下https://github.com/moxiecode/moxie/wiki/API销毁⽂件对象

参考资料

1.2.