詳細介紹HTML5Fileapi實現斷點續傳

<input type="file" multiple="multiple" name="file" id="file">

document.body.addEventListener('dragover', dragFile, false);
function dragFile(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 evt.dataTransfer.dropEffect = 'copy';
}

document.body.addEventListener('drop', dropFile, false);
function dragFile(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 // dataTransfer.files屬性可以獲取到所有拖動選擇的文件，通過遍歷可以讀取到所有文件的信息。
 // 遍歷每個文件可以獲取到文件的 name、size、type、lastModifiedDate等關鍵信息
 var files = evt.dataTransfer.files;
 // addfile 方法 用來添加上傳文件隊列，在input的change事件中也需要調用
 // 該方法首先檢查有無文件正在上傳中，如果有就將后續加入的文件放到上傳隊列中，如果沒有文件正在上傳就直接執行上傳命令
 addfile(files);
}

var packet = file.slice(start, end);

file.slice(0,1000);
file.slice(1000,2000);
file.slice(2000,3000);
// ......

textpop-up

var xhr = new XMLHttpRequest();
var url = xxx // 文件上傳的地址 可以包括文件的參數 如文件名稱 分塊數等以便后臺處理
xhr.open('POST', url, true);
xhr.onload = function (e){
 // 判斷文件是否上傳成功，如果成功繼續上傳下一塊，如果失敗重試該快
}
xhr.upload.onprogress = function(e){
 // 選用 如果文件分塊大小較大 可以通過該方法判斷單片文件具體的上傳進度
 // e.loaded 該片文件上傳了多少
 // e.totalSize 該片文件的總共大小
}
xhr.send(packet);