HTML5实现大文件分片上传

上传大文件一直是个比较头疼的问题，一是上传时间长，中途一旦出错会导致前功尽弃；二是服务端配置复杂，要考虑接收超大表单和超时问题，如果是托管主机没准还改不了配置，默认只能接收小于4MB的附件。

比较理想的方案是能够把大文件分片，一片一片的传到服务端，再由服务端合并。这么做的好处在于一旦上传失败只是损失一个分片而已，不用整个文件重传，而且每个分片的大小可以控制在4MB以内，服务端不用做任何设置就可适应。

常用的解决方案是RIA，以flex为例，通常是利用FileReference.load方法加载文件得到ByteArray，然后分片构造表单（flash的高版本不允许直接访问文件）。不过这个load方法只能加载较小的文件，大约不超过300MB，因此适用性不是很强。

好在现在有了HTML5，我们可以直接构造分片了，这是一个非常喜人的进步，但是有一个最大的缺陷就是，不支持IE啊，不支持IE啊，不支持IE啊。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<script type="text/javascript"> $("#file").change(function(event) {     var file = $("#file")[0].files[0];     PostFile(file,0);});function PostFile(file,i){     var name = file.name,        //文件名     size = file.size,        //总大小shardSize = 2 * 1024 * 1024,     shardSize = 2 * 1024 * 1024,//以2MB为一个分片     shardCount = Math.ceil(size / shardSize);  //总片数     if(i >= shardCount){         return;     }     //计算每一片的起始与结束位置     var start = i * shardSize,     end = Math.min(size, start + shardSize); //构造一个表单，FormData是HTML5新增的     var form = new FormData();     form.append("data", file.slice(start,end));  //slice方法用于切出文件的一部分     form.append("lastModified", file.lastModified); //slice方法用于切出文件的一部分     form.append("name", name);     form.append("total", shardCount);  //总片数     form.append("index", i + 1);        //当前是第几片     //Ajax提交     $.ajax({         url: '{:url("picture/video")}?type=2',         type: "POST",         data: form,         async: true,        //异步         processData: false,  //很重要，告诉jquery不要对form进行处理         contentType: false,  //很重要，指定为false才能形成正确的Content-Type         success: function(data){             if(data){                 i = data++;                 var num = Math.ceil(i*100 / shardCount);                 console.log(num+'%');                 PostFile(file,i);             }         }     });}</script>