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

关于分片上传

为什么要使用分片上传？

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

什么是分片上传？

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

分片上传的优势

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

更强的容错能力



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



可以断点续传



关于秒传

怎么进行分片上传

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

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的上传组件，这个组件很强大，有如下特点：

有多种上传方式，HTML5、flash、silverlight以及传统的input type=file，Plupload会自动检测当前的浏览器环境，切换到最合适的上传方式，

支持拖拽上传

支持前端的图片压缩

支持文件信息的读取

支持分片上传

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

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