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

选择js篇章。

最近在公司发行的封装的一个附件组件，前段js框架使用的是plupload，业余时间自己了解了下这个技术，已经就开门见山，说说这个上传插件。

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', //触发文件选择对话框的按钮，为那个元素idurl : '${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元素的idurlString 服务器端接收和处理上传文件的脚本地址，可以是相对路径(相对于当前调用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实例的唯一标识idstate当前的上传状态，可能的值为plupload.STARTED或plupload.STOPPED，该值由Plupload实例的stop()或statr()方法控制。默认为plupload.STOPPEDruntime当前使用的上传方式files当前的上传队列，是一个由上传队列中的文件对象组成的数组settings当前的配置参数对象total表示总体进度信息的QueueProgress对象

详细介绍：http://www.cnblogs.com/Janejxt/p/5391714.html  转自姜小七的填坑之旅，在此特别感谢。

源码下载地址：

https://www.oschina.net/news/73850/plupload-v2-1

plupload的使用说明：

http://chaping.github.io/plupload/doc/#plupload_doc1