HTML5实现大文件分片上传

柔情只为你懂 2024-03-16 12:22 47阅读 0赞

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

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

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

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

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