利用HTML5分片上傳超大檔案

在網頁中直接上傳大檔案一直是個比較頭疼的問題，主要面臨的問題一般包括兩類：一是上傳時間長中途一旦出錯會導致前功盡棄；二是服務端配置複雜，要考慮接收超大表單和超時問題，如果是託管主機沒準還改不了配置，預設只能接收小於4mb的附件。

比較理想的方案是能夠把大檔案分片，一片一片的傳到服務端，再由服務端合併。這麼做的好處在於一旦上傳失敗只是損失乙個分片而已，不用整個檔案重傳，而且每個分片的大小可以控制在4mb以內，服務端不用做任何設定就可適應。

常用的解決方案是ria，以flex為例，通常是利用filereference.load方法載入檔案得到bytearray，然後分片構造表單（flash的高版本不允許直接訪問檔案）。不過這個load方法只能載入較小的檔案，大約不超過300mb，因此適用性不是很強。

好在現在有了html5，我們可以直接構造分片了，這是乙個非常喜人的進步，只可惜目前適用面不廣（ie啊ie，真是恨你恨得牙癢癢）。

言歸正傳，來看乙個demo吧，基於asp.net mvc3，只是示例，很多問題做了簡化處理。

主要是客戶端，新特性都體現在這裡：

上傳等待這裡的slice方法和formdata都是html5之前不存在的。通過這樣的方法，我們的表單構造出來是這樣的，抓包看看：

可以看到構造出來的content-type是multipart/form-data，也就是符合rfc標準的那個最傳統的檔案上傳表單。另外我們同時傳輸的name、total等屬性也都在表單裡。

然後是服務端，沒什麼新鮮的，完全是在接收乙個普通的檔案：

//返回是否成功，此處做了簡化處理

return json(new ); }

上面的demo很多問題是簡化處理的，比如沒做什麼異常處理，客戶端也沒有判斷服務端是否出錯重試一類的，各位可以自己完善。

在上面的基礎上，我們可以做很多功能上的擴充套件，比如我們可以控制所有分片是順序上傳還是併發上傳，以適用不同應用。再比如我們可以在整體檔案上傳前以及分片上傳前都先計算一下相應的hash，發個請求詢問伺服器檔案是否已存在，如果存在就不要重複上傳了，這樣就實現了「極速上傳」以及「斷點續傳」。

利用HTML5分片上傳超大檔案

在網頁中直接上傳大檔案一直是個比較頭疼的問題，主要面臨的問題一般包括兩類 一是上傳時間長中途一旦出錯會導致前功盡棄 二是服務端配置複雜，要考慮接收超大表單和超時問題，如果是託管主機沒準還改不了配置，預設只能接收小於4mb的附件。比較理想的方案是能夠把大檔案分片，一片一片的傳到服務端，再由服務端合併。...

利用HTML5分片上傳超大檔案

在網頁中直接上傳大檔案一直是個比較頭疼的問題，主要面臨的問題一般包括兩類 一是上傳時間長中途一旦出錯會導致前功盡棄 二是服務端配置複雜，要考慮接收超大表單和超時問題，如果是託管主機沒準還改不了配置，預設只能接收小於4mb的附件。比較理想的方案是能夠把大檔案分片，一片一片的傳到服務端，再由服務端合併。...

利用HTML5分片上傳超大檔案

在網頁中直接上傳大檔案一直是個比較頭疼的問題，主要面臨的問題一般包括兩類 一是上傳時間長中途一旦出錯會導致前功盡棄 二是服務端配置複雜，要考慮接收超大表單和超時問題，如果是託管主機沒準還改不了配置，預設只能接收小於4mb的附件。比較理想的方案是能夠把大檔案分片，一片一片的傳到服務端，再由服務端合併。...