HTML5关于上传API的一些使用（下）

通过前面两篇的分享，我们已经搞定了单个文件的普通的上传，包括文件预览，图片预览，上传速度等前端界面的显示，这次我们来谈谈关于>XMLHttpRequest2.0在界面之后假如才用分片上传能做到一些什么功能

关于分片上传

为什么要使用分片上传？

考虑如下场景，假如用户需要在一个视频分享社区上传一部.avi的视频文件进行分享，大小在2G以上，这个时候用户假如在上传的过程当中，发生了宽带掉线，不小心关闭了浏览器等这种意外的事情，用户这个时候除了重传整个文件以外，没有其他更好的选择，可能用户就不会考虑再次进行上传了，这个社区因此可能就这么丢掉了一个优质用户。假如才用分片上传则可以有效的避免这个问题。另外大量的第三方云存储实际上也是有做接受的文件大小限制的。

什么是分片上传？

分片上传的意思实际上就是把一个大文件进行分割，一个视频文件就好比是一个非常大的数组文件，分片就是把这个数组分割成N个小的数组，我们把分片之后的小文件一个个的上传到服务器，服务器在对分片的文件进行重组，从而得到一个完整的视频文件。

分片上传的优势

采用文件分片上传，有哪些优势呢？

• 更强的容错能力

  采用分片上传可以大大减少重传的情况，把一个大文件进行分片上传之后就算当前这个分片在上传的过程中出现了什么意外，用户也只需要重新上传当前的这个分片，而不用将整个文件进行上传。

• 可以模拟出暂停和继续功能

  使用了分片上传，当用户点击暂停的时候终断当前这一片文件的上传，当用户点击继续的时候可以继续从当前上传的这一片文件开始上传

• 可以断点续传

  使用分片上传后，当用户关闭电脑，下次在登录网页的时候我们可以通过把当前正在上传的分片的id以及通过对文件的md5的方式序列化文件得到唯一的key存在本地，用户打开上传页面就可以直接读取当前分片的位置继续进行上传。

• 关于秒传

  我们既然能够通过对碎片文件进行MD5的序列化，那么我们是否还可以考虑对整个文件进行序列化，和服务器那边的文件进行对比，这样假如服务器那边已经存在了一个相同的文件，我们就可以直接实现秒传文件了。

怎么进行分片上传

分片上传这么多好处，那怎么进行分片上传呢？

function upload(){
    var file=$("#file")[0].files[0],//文件对象
        name=file.name, //文件名称
        size=file.size, //文件大小
        succeed=0;      //可以用来计算进度的变量
    var shardSize = 2 * 1024 * 1024,    //以2MB为一个分片
        shardCount = Math.ceil(size / shardSize);  //总片数

    for(var i = 0;i < shardCount;++i){
        //计算每一片的起始与结束位置

        var start = i * shardSize,
               end = Math.min(size, start + shardSize);

            //构造一个表单，FormData是HTML5新增的

            var form = new FormData();

            form.append("data", file.slice(start,end));  //file对象的slice方法用于切出文件的一部分

            form.append("name", name);

            form.append("total", shardCount);  //总片数

            form.append("index", i + 1);        //当前是第几片               

            //Ajax提交

            $.ajax({

                url: "../File/Upload",

                type: "POST",

                data: form,        //刚刚构建的form数据对象

                async: true,        //异步

                processData: false,  //很重要，告诉jquery不要对form进行处理

                contentType: false,  //很重要，指定为false才能形成正确的Content-Type

                success: function(){
                    //当前这一片上传成功显示进度                                 
                    ++succeed;            
                    $("#output").text(succeed + " / " + shardCount);            
                }            
            });

    }
}

上面这些代码就可以简单的实现一个分片上传文件的前端处理了，当然还有许多东西需要做比如暂停，假如还需要进行多文件的分片上传，断点续传等等这么写，那还得继续写写写写很多这种低层的方法。这里推荐使用一个叫做Plupload的上传组件，这个组件很强大，有如下特点：

1. 有多种上传方式，HTML5、flash、silverlight以及传统的input type=file，Plupload会自动检测当前的浏览器环境，切换到最合适的上传方式，
2. 支持拖拽上传
3. 支持前端的图片压缩
4. 支持文件信息的读取
5. 支持分片上传

通过Plupload我们就不需要关心上传过程中这些底层处理，只需要实例化Plupload对象就可以使用他给我们提供的各种事件，方法，属性等。

关于Plupload的具体使用方法可以参考 http://www.cnblogs.com/2050/p/3913184.html