使用HTML5实现大文件的分片上传
HTML5实现大文件分片上传的方法是使用File API中的Blob对象和FormData对象。首先，将大文件分成多个小块，然后使用Blob对象将每个小块转换为二进制数据。接着，将这些二进制数据添加到FormData对象中，并设置相应的参数，如文件名、文件大小等。最后，通过XMLHttpRequest或Fetch API发送请求，将FormData对象发送到服务器。服务器接收到请求后，根据参数将各个分片合并成完整的文件。这种方法可以有效地解决大文件上传的问题，提高用户体验。
上传大文件一直是个比较头疼的问题，一是上传时间长，中途一旦出错会导致前功尽弃；二是服务端配置复杂，要考虑接收超大表单和超时问题，如果是托管主机没准还改不了配置，默认只能接收小于4MB的附件。
比较理想的方案是能够把大文件分片，一片一片的传到服务端，再由服务端合并。这么做的好处在于一旦上传失败只是损失一个分片而已，不用整个文件重传，而且每个分片的大小可以控制在4MB以内，服务端不用做任何设置就可适应。
常用的解决方案是RIA，以flex为例，通常是利用FileReference.load方法加载文件得到ByteArray，然后分片构造表单（flash的高版本不允许直接访问文件）。不过这个load方法只能加载较小的文件，大约不超过300MB，因此适用性不是很强。
好在现在有了HTML5，我们可以直接构造分片了，这是一个非常喜人的进步，但是有一个最大的缺陷就是，不支持IE啊，不支持IE啊，不支持IE啊。
<scripttype="text/javascript">$("#file").change(function(event){varfile=$("#file")[0].files[0];PostFile(file,0);});functionPostFile(file,i){varname=file.name,//文件名size=file.size,//总大小shardSize=2*1024*1024,shardSize=2*1024*1024,//以2MB为一个分片shardCount=Math.ceil(size/shardSize);//总片数if(i>=shardCount){return;}//计算每一片的起始与结束位置varstart=i*shardSize,end=Math.min(size,start+shardSize);//构造一个表单，FormData是HTML5新增的varform=newFormData();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-Typesuccess:function(data){if(data){i=data++;varnum=Math.ceil(i*100/shardCount);console.log(num+'%');PostFile(file,i);}}});}</script>
