PLUpload文件上传的使用

简述

---

文件上传，我相信大家首先想到应该会是<input type = 'file' />没错，作为原生的html标准文件上传组件，他的功能已经是足够强大了。但是如果说想要独挡一面，还是略显乏力。对于大，多文件的处理他就显得力不从心了。

PLUpload

---

在做较大的视频文件上传的时候突然遇到了瓶颈，我也尝试了一些其他的上传组件比如：SWFUpload，不过后来还是选择了PLUpload（TinyMCE团队），也许是因为他使用起来简单而且功能强大吧。功能强大的它有哪些特性呢！

1. 自适应上传方式。根据程序当前的环境会在HTML5、flash、silverlight、input这些方式中选择最优方案 ，如果支持Html5的话他会优先使用这种方式。
2. 压缩图片可以在前端进行处理
3. 大文件分片上传，分割成小片进行一个大文件的上传。

实例一：音乐文件的上传

实例二：多文件的支持，上传进度的显示

使用

---

那到底要以什么样的方式来使用它呢！下面我们一起来看下，大致的使用流程：

1. 相关文件的引入

<script type="text/javascript" src="/Scripts/Upload/bootstrap.min.js" />
<script type="text/javascript" src="/Scripts/Upload/jquery.plupload.queue.min.js" />
<script type="text/javascript" src="/Scripts/Upload/plupload.min.js" />
<script type="text/javascript" src="/Scripts/Upload/plupload.flash.min.js" />
<script type="text/javascript" src="/Scripts/Upload/MyUpload.js" />

2.实例化我们需要的对象，这部分主要是对于上传参数的一个配置

//实例化一个plupload上传对象
var uploader = new plupload.Uploader({ 
    browse_button: 'browse',
    url: '/Upload/upload.aspx',
    flash_swf_url: '/Scripts/Upload/plupload.flash.swf',
    silverlight_xap_url: '/Scripts/Upload/Moxie.xap',
    //使用Flash插件
    runtimes: 'flash',
    //最大文件限制
    max_file_size: '100mb',
    //一次上传数据大小
    chunk_size: '100mb',    
    unique_names: false,    //是否自动生成唯一名称
    //filters: [                //文件类型限制
    //  {title: "图片文件", extensions: "jpg,gif,png" },
    //  { title: "压缩文件", extensions: "zip,rar" }
    //],

    // 缩放图片
    resize: { width: 320, height: 240, quality: 80 },
    init: {
        FileUploaded: function (up, file, info) {
            isAdd = false;
            hideLoading();
            //一个文件上传成功
            //上传成功后您的业务逻辑
        },
        Error: function (up, args) {
            //发生错误
            if (args.file) {
                alert('[error] File:' + args.file + "   " + args.message);
            } else {
                alert('[error]' + args.message);
            }
        }
    }
});

3.使用时我们需要先初始化该组件，调用init方法：

uploader.init(); //初始化

我们也可以根据需要为其绑定相关的事件,下面列举两个我认为比较常用的事件：文件添加以及进度更新

//绑定文件添加进队列事件
uploader.bind('FilesAdded', function (uploader, files) {
   //一个文件被添加了
   //uploader为当前实例对象，files数组，上传队列里的文件对象
});

//绑定上传进度触发事件
uploader.bind('UploadProgress', function (uploader, file) {
    //从这里我们可以动态得到控制前端的进度条显示   
    //file.percent为当前的进度
    //file.loaded为已经上传的大小
    //file.size为文件的总大小
});

4.文件选择完毕后将其上传到指定的后台服务器（Url是在上面第一步那里配置）

///开始上传。
function StartUp() {
    uploader.start();
}

扩展

其实对于组件的使用其实并不会有什么难点，我们在使用一个组件的时候通常会更加关注这个组件有哪些属性方法，可以给我们带来怎么样的一个扩展性。我这边罗列出一些相关的属性！

配置参数—–组件实例化

1. browse_button：文件选择对话框的DOM元素，就是点击触发选择文件的那个元素。
2. url：服务端处理上传的url
3. filters：限制上传文件的类型，大小等。mime_types==》用来限定上传文件的类型 ，max_file_size==》限定上传文件的大小，prevent_duplicates==》是否允许选取重复的文件
4. multipart：为true时将以multipart/form-data的形式来上传文件，为false时则以二进制的格式来上传文件。
5. max_retries：当发生plupload.HTTP_ERROR错误时的重试次数，为0时表示不重试
6. chunk_size：分片上传文件时，每片文件被切割成的大小，为数字时单位为字节。
7. resize：图片压缩参数5个属性：width==》压缩后图片的宽度，height==》压缩后图片的高度，crop==》是否裁剪图片，quality==》压缩后图片的质量（jpg的图片有效，默认为90）
8. multi_selection：是否可以在文件浏览对话框中选择多个文件，true为可以，false为不可以。
9. unique_names：是否生成唯一文件名。
10. runtimes：指定上传方式（html5,flash,silverlight,html4）
11. file_data_name：上传文件域名称
12. flash_swf_url：flash上传组件的url地址
13. silverlight_xap_url：silverlight上传组件的url地址

事件—–绑定（bind）
1. Init：Plupload初始化完成后触发，参数：uploader当前的plupload实例对象
2. OptionChanged：当使用Plupload实例的setOption()方法改变当前配置参数后触发，参数：(uploader,option_name,new_value,old_value)：uploader为当前的plupload实例对象，option_name为发生改变的参数名称，new_value为改变后的值，old_value为改变前的值
3. UploadFile：当上传队列中某一个文件开始上传后触发，参数：(uploader,file)：uploader为当前的plupload实例对象，file为触发此事件的文件对象
4. BeforeUpload：上传前触发，参数同3
5. UploadProgress：会在文件上传过程中不断触发，可以用此事件来显示上传进度，参数：(uploader，file)：uploader为当前的plupload实例对象，file为触发此事件的文件对象
6. FilesRemoved：当文件从上传队列移除后触发，参数同3
7. FilesAdded：当文件从上传队列添加后触发，参数同3
8. FileUploaded：上传完成后触发，参数：(uploader,file,responseObject)uploader为当前的plupload实例对象，file为触发此事件的文件对象，responseObject为服务器返回的信息对象（response，responseHeaders，status）
9. UploadComplete：当上传队列中所有文件都上传完成后触发，参数同3
10. Error：当发生错误时触发，参数：(uploader,errObject)，uploader为当前的plupload实例对象，errObject为错误对象，3个主要属性(code：错误代码，file：与该错误相关的文件对象，message：错误信息）
11. Destroy：当调用destroy方法时触发，参数：(uploader)：uploader为当前的plupload实例对象

实例方法—–uploader
1. init()，初始化Plupload实例
2. setOption(option, [value])，设置配置参数
3. getOption([option])，获取配置参数
4. refresh()，刷新
5. start()，开始上传
6. stop()，停止上传
7. disableBrowse(disable)，禁用或启用plupload的文件浏览按钮
8. getFile(id)，通过id来获取文件对象
9. addFile(file, [fileName])，向上传队列中添加文件，如果成功添加了文件，会触发FilesAdded事件
10. removeFile(file)，从上传队列中移除文件，参数file为plupload文件对象或先前指定的文件名称
11. splice(start, length)，从上传队列中移除一部分文件
12. trigger(name, Multiple)，触发某个事件
13. hasEventListener(name)，用来判断某个事件是否有监听函数，name为事件名称
14. bind(name, func, scope)，给某个事件绑定监听函数
15. unbind(name, func)，移除事件的监听函数
16. unbindAll()，移除所有事件的所有监听函数
17. destroy()，销毁plupload实例
说明
至此我只列出我个人觉得较为重要，或者是我项目中有使用到的函数，相关属性的配置。这个的组件功能还是很强大的，具体的文档可以关注下官方给出的文档介绍。官网链接

小结

---

看文档说明是比较乏味的，但是像这种开源的组件之类的我们想要更好的更贴合自己的程序的话我们不免要多多的研究下，组件所能提供的Api！耐心：程序猿所必修的一门课。
谢谢大家的支持，转载请注明出处！