目前從實用技術角度講，檔案上傳的斷點續傳實現主要是藉助客戶端，例如，我們首次進入某網盤，會看到下圖所示的“控制元件安裝”提示：

有的網盤也有檔案上傳暫停的功能，這似乎是藉助swfUpload實現的。

也就是，這些帶續傳功能的上傳都不是使用HTTP協議實現的，也就是不是傳統的網頁技術(HTML+CSS+JS)實現的。

然，times are changing, 事物發展，時代變化。以前的一些所謂的“不能”、“不可能”都將成為過去。

上月一篇獨苗文章介紹了XMLHttpRequest level 2(下簡稱Ajax 2.0)中的一些支援的資料格式，如果稍微關注，應該知道，Ajax 2.0中最大的變化之一就是對二進位制資料的支援，而且提供了一個可以直接處理二進位制資料的方法——slice

JS中的字串有slice方法，陣列也有。Ajax 2.0經過一些變化後，現在也和陣列、字串的slice方法語法完全一致了。於是，我們就可以把二進位制資料流想象成一些連續的字串資料，並對這些二進位制資料進行slice處理。

比方說怎樣的場合呢？

PHP預設似乎有個最大檔案上傳的限制 – post_max_size，我的本地看了下，是64M.

此時，我們想一次性傳一個80M的動作片精華片段，就會以失敗告終。

但是，有了slice方法，我們可以把檔案分割，比方說，每20M作為一個請求傳送出去，後臺再把這些二進位制資料拼合成一個完整檔案。

還有一個很重要的場合就是斷點續傳！

檔案傳輸是個具有時間週期的過程，從玩三國殺的離線率可以看出，掉線什麼的是常有的事情。顯然，傳檔案必定會存在傳著傳著就死在99%位置的情況。

你想啊，大鼻孔姐的片子想放到網盤裡，隨時隨地可以欣賞。結果看著進度條等了40分鐘，好不容易傳到99%，突然斷電…………開機後，發現又要重傳，是不是小弟弟要氣得短小軟？顯然，後果很嚴重哈~

因此，對於大檔案而言，斷電續傳功能很重要。有了Blob資料格式的slice方法，一切都變得簡單了。

我的思路是這樣的，有兩條：
1. 瀏覽器記住（如localStorage）最近一次成功傳輸的位置；當再次上傳這個圖片的時候，直接從瀏覽器儲存的位置開始傳。
2. 瀏覽器不做任何事情，在上傳之前先去後臺走一遍，看看目前此檔案是否存在，以及存在的大小，返回給瀏覽器，然後瀏覽器再決定上傳的起始位置。

理性的分析以及實踐的結果表明，第二種思路可行性更高。//zxx: 並不一定是最好的思路，您可以自己想出更精彩的實踐方法

如果用文字舉例的話就是：
某老師的視訊是80*1024*1024B, 我們每次傳1024*1024B，也就是1M，假設傳了79M了，結果大腳一抖，電源關掉有木有！某老師就這樣隨風逝去了……

使用者重新開機，決定再次傳這個80M的視訊。當用戶選擇了這個檔案後，我們先去後臺走一圈，把當前已經傳好的檔案大小反饋給客戶端（Ajax 1.0就可以），JS拿反饋大小和原始檔大小一比對，奶奶的，殘缺啊！於是，就從殘缺位置slice，這裡就是：

接著之前的只傳了1M就OK啦！於是，斷點續傳實現。

由於網頁本身的侷限性，我們沒法直接觸發本地檔案的上傳。因此，目前而言，斷點檔案還是要使用者選擇（相比客戶端上傳軟體多了這一步）。

三、檔案斷點續傳的實踐

說明：

1. 上demo可以說是一個比較完善的上傳體驗，有刪除，重傳，續傳，進度條等常用功能。
2. 基於Ajax 2.0的二進位制檔案傳輸實現，因此，IE10+，Chrome以及Firefox等瀏覽器支援。另外JS原生，無外部依賴。
3. 空間的流量月月吃緊，經常溢位不夠用，因此，為了節約成本，只允許最大200K的檔案。所以，大家想要測試斷點續傳效果，可以通過工具，把自己的瀏覽器速度限制到10~20K每秒。
4. demo頁面每100K就會對檔案進行一次分割上傳，因此，100~200K大小檔案會有看到2次上傳請求。PS：實際開發時候，應該至少1M一次分割。
5. 為了直觀表現斷點上傳的功能，我會截一個本地的視訊給大家演示，並原聲重現。
6. 後臺PHP很簡單，就是追加二進位制資料，file_put_contents方法有個FILE_APPEND選項，直接追加，很好用的！
7. 正好研究了下開源協議，這裡請容我練個：demo頁面中的JS+CSS+HTML原始碼遵循GPL協議，即您可以任意複製，修改，但是，只能作為學習或私人專案使用，不能作為商業軟體的一部分去出售。如有疑問，可[email protected]聯絡。

其他一些技術細節，懂的人不說也知道是怎麼回事，不懂的人要花很大功夫斟酌表達才可以。然，目前時機不成熟，付出收益比略低，因此，這裡不具體敘述，有問題歡迎郵箱聯絡。下面視訊演示下斷點續傳的效果：

視訊展示：
因為半夜三更錄的視訊，老婆大人已經安然就寢，所以自己聲音比較小，發音也不太準，貌似被優酷搞糊了，大家湊合看看吧~~

四、說點題外話

上月本人只更新了一篇文章。有一週是整週的培訓。然後除了研究現在這個Ajax斷點續傳，還在做一個自己的開源專案（已經用了兩週了，本週應該可以結束）。

本人最近有在糾結專利與開源的事情。我司申請專利很是方便，而且公司鼓勵，且對個人發展有很有幫助，我顯然是要積極做這些事情的。但是，個人價值觀中很重要的一點就是要留下什麼，因此，自己是非常喜歡共享東西的。於是就存在一個矛盾，有些東西，例如一些創新的想法或者實現方式，如果成為的專利，就不好拿出來隨意分享了，因為，自己申請的專利不是自己的而是公司的，自己完全沒有把控權。頭疼~~

不過，今天例會跟組裡前輩溝通了下，算是想通了。這樣子，自己平時業餘時間研究的東西，即使很贊，很具有專利性，我也會及時和大家一起探討與進步；如果是實際工作發現的創新性想法，則走專利路線，技術封閉。我舉得這樣的權衡應該是很不錯的，不知大家的看法如何呢？

哈哈，今天特地研究了下開源版權的問題，學到了不少，各種License都大致瞭解了一點，文中好像就有體現了，

部落格所有技術文章遵循CC協議，即署名、非商業性使用、相同方式共享、禁止演繹。

一些開源外掛等遵循其他協議，回頭補上~~