今天主要講講檔案切片，主要在上傳大檔案的時候需要用到，你想想，上傳一個幾百兆的大視訊，但網路頻寬又特別感人，一個不小心就報錯造成上傳失敗，那是什麼感受...

       進入正題，選擇檔案後，點選“確定”，首先計算出檔案總大小，然後需要做什麼呢，你需要告訴伺服器這個大檔案被切成了多少片，還得在每次上傳的時候告訴它當前是第幾片。最好加一個Date.now()，不然大家同時上傳一個1.jpg，一到伺服器就重名了，加了Date.now()，1_(時間戳).jpg就不會重名了。

       每次上傳的Blob物件使用file.slice(start, end)完成：

注意紅框標註的地方，每次上傳都需要執行formData['delete'](fileName)

，至於原因已經在裡面加入了，自己看哈。

下面是上傳進度和上傳速度的程式碼：

var xhr = ZUtil.getXHR(),
formData = new FormData(),
// 上次的時間戳
prev = new Date().getTime(),
// 以上傳
load = 0,
// 檔案大小
size = file.size,
translateSize = ZUtil.translateByte(size),
prevProgress = 0,
$bar = $row.find('.z-progress-bar'),
$progress = $row.find('.z-upload-progress'),
$speed = $row.find('.z-upload-speed'),

$progressLinear = $row.find('.z-upload-progress-linear');formData.append('uniqueFlag', Date.now());
formData.append('fileName', file.name);xhr.addEventListener('error', uploadError, false);
xhr.upload.addEventListener('progress', function(e) {
// e.loaded是本次請求已經上傳的檔案大小
var loaded,
// 當前時間戳
now = new Date().getTime(),

distance = now - prev;
if (splitUpload) {

/**

* 如果是分片上傳，e.loaded是每次的file.slice(start, end)，理論上就是每份檔案切片大小

* 而不會像整體檔案上傳一樣,e.loaded是從0慢慢增長到file.size

* 需要加上load才是已經上傳的檔案大小

*/

loaded = e.loaded + load;

} else {

loaded = e.loaded;

}var progress = Math.min(Math.round(loaded / size * 100), 100);
/**
* 每次更新的時間間隔 >= speedUpdateInterval
* 或者上傳完畢（如果是分片上傳，那麼e.loaded >= splitSize也意味著當前分片檔案上傳完成）
*/
if(distance >= speedUpdateInterval || (progress == 100 || (splitUpload && e.loaded >= splitSize))) {

var speed = ZUtil.translateByte((loaded - load) / distance * 1000);

$speed.html('速度：' + speed + '/s');

prev = now;

load = loaded;

}
if(progress != prevProgress) {

prevProgress = progress;

$progress.html('進度：' + progress + '% of ' + translateSize);

$progressLinear.css({

width : progress + '%'

});

}

下面是檔案上傳效果：

第一個切片：

最後一個切片：

大家也看到了，檔案只有216KB，我設定的切片大小隻有0.01MB，所以才會上傳22次。

        onreadystatechange程式碼

       可以看到，每次需要後端返回success，並且當前切片index < 總切片數totalIndex才會繼續上傳，如果全部上傳完畢，會呼叫afterUpload回撥方法

後端java程式碼

       通過對比index和totalIndex，如果相同，就合併檔案。

       上一篇已經提過如果不適用切片，僅僅一個進度條，這都是騙人的。使用切片後，分片上傳檔案，等到上一片檔案上傳成功後才會繼續上傳下一片，因為公司沒有要求使用資料庫記錄切片資訊，所以每次上傳切片後沒有將切片檔案資訊儲存到資料庫，要是哪個切片上傳失敗了，只能重新上傳...這樣做雖然花費的時間長了一點（當然了，這麼多次請求，HTTP握手肯定很費時間的），不過這樣也是值得的，幾百兆的大檔案重複上傳更費時間呢，反正還是需要開發者自己權衡，個人建議，幾兆的小檔案就別用切片了，麻煩。