Plupload上传插件简单整理

Plupload

Plupload是有TinyMCE的开发者开发的，为您的内容管理系统或是相似上传程序提供一个高度可用的上传插件。Plupload 目前分为一个核心API 和一个jQuery上传队列部件，这样使你能够直接使用或是本身定制。

功能和特色：

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

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

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

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

五、支持把大文件切割成小片进行上传，由于有些浏览器对很大的文件好比几G的一些文件没法上传。

六、支持文件过滤上传

依赖及兼容

依赖性

不依赖于任何库和框架

兼容性

支持Firefox、Chrome、 Safari、 IE6,7,8,9,10,11

注意：

一、分块:chrome和firefox 4+ 支持。

二、拖拽适用于firefox和webkit内核的浏览器，windows版的safari还存在一些问题待解决。

三、图片缩放仅在firefox3.5+和chrome上支持，safari/opera 不支持直接数据访问选定的文件。

四、 多文件上传仅支持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()	销毁文件对象

参考资料

1.Plupload官网

2.Plupload上传插件中文帮助文档