通過前面兩篇的分享，我們已經搞定了單個文件的普通的上傳，包括文件預覽，圖片預覽，上傳速度等前端界面的顯示，這次我們來談談關於>XMLHttpRequest2.0在界面之後假如才用分片上傳能做到一些什麽功能

關於分片上傳

為什麽要使用分片上傳？

考慮如下場景，假如用戶需要在一個視頻分享社區上傳一部.avi的視頻文件進行分享，大小在2G以上，這個時候用戶假如在上傳的過程當中，發生了寬帶掉線，不小心關閉了瀏覽器等這種意外的事情，用戶這個時候除了重傳整個文件以外，沒有其他更好的選擇，可能用戶就不會考慮再次進行上傳了，這個社區因此可能就這麽丟掉了一個優質用戶。假如才用分片上傳則可以有效的避免這個問題。另外大量的第三方雲存儲實際上也是有做接受的文件大小限制的。

什麽是分片上傳？

分片上傳的意思實際上就是把一個大文件進行分割，一個視頻文件就好比是一個非常大的數組文件，分片就是把這個數組分割成N個小的數組，我們把分片之後的小文件一個個的上傳到服務器，服務器在對分片的文件進行重組，從而得到一個完整的視頻文件。

分片上傳的優勢

采用文件分片上傳，有哪些優勢呢？

• 更強的容錯能力

  采用分片上傳可以大大減少重傳的情況，把一個大文件進行分片上傳之後就算當前這個分片在上傳的過程中出現了什麽意外，用戶也只需要重新上傳當前的這個分片，而不用將整個文件進行上傳。

• 可以模擬出暫停和繼續功能

  使用了分片上傳，當用戶點擊暫停的時候終斷當前這一片文件的上傳，當用戶點擊繼續的時候可以繼續從當前上傳的這一片文件開始上傳

• 可以斷點續傳

  使用分片上傳後，當用戶關閉電腦，下次在登錄網頁的時候我們可以通過把當前正在上傳的分片的id以及通過對文件的md5的方式序列化文件得到唯一的key存在本地，用戶打開上傳頁面就可以直接讀取當前分片的位置繼續進行上傳。

• 關於秒傳

  我們既然能夠通過對碎片文件進行MD5的序列化，那麽我們是否還可以考慮對整個文件進行序列化，和服務器那邊的文件進行對比，這樣假如服務器那邊已經存在了一個相同的文件，我們就可以直接實現秒傳文件了。

怎麽進行分片上傳

分片上傳這麽多好處，那怎麽進行分片上傳呢？

function upload(){
    var file=$("#file")[0].files[0],//
 
文件對象
        name=file.name, //文件名稱
        size=file.size, //文件大小
        succeed=0;      //可以用來計算進度的變量
    var shardSize = 2 * 1024 * 1024,    //以2MB為一個分片
        shardCount = Math.ceil(size / shardSize);  //總片數

    for(var i = 0;i < shardCount;++i){
        //計算每一片的起始與結束位置

        var start = i * shardSize,
               end = Math.min(size, start + shardSize);

            //構造一個表單，FormData是HTML5新增的

            var form = new FormData();

            form.append("data", file.slice(start,end));  //file對象的slice方法用於切出文件的一部分

            form.append("name", name);

            form.append("total", shardCount);  //總片數

            form.append("index", i + 1);        //當前是第幾片               

            //Ajax提交

            $.ajax({

                url: "../File/Upload",

                type: "POST",

                data: form,        //剛剛構建的form數據對象

                async: true,        //異步

                processData: false,  //很重要，告訴jquery不要對form進行處理

                contentType: false,  //很重要，指定為false才能形成正確的Content-Type

                success: function(){
                    //當前這一片上傳成功顯示進度                                 
                    ++succeed;            
                    $("#output").text(succeed + " / " + shardCount);            
                }            
            });

    }
}

上面這些代碼就可以簡單的實現一個分片上傳文件的前端處理了，當然還有許多東西需要做比如暫停，假如還需要進行多文件的分片上傳，斷點續傳等等這麽寫，那還得繼續寫寫寫寫很多這種低層的方法。這裏推薦使用一個叫做Plupload的上傳組件，這個組件很強大，有如下特點：

1. 有多種上傳方式，HTML5、flash、silverlight以及傳統的input type=file，Plupload會自動檢測當前的瀏覽器環境，切換到最合適的上傳方式，
2. 支持拖拽上傳
3. 支持前端的圖片壓縮
4. 支持文件信息的讀取
5. 支持分片上傳

通過Plupload我們就不需要關心上傳過程中這些底層處理，只需要實例化Plupload對象就可以使用他給我們提供的各種事件，方法，屬性等。

關於Plupload的具體使用方法可以參考 http://www.cnblogs.com/2050/p/3913184.html

HTML5關於上傳API的一些使用（下）