實現(xiàn)HTML5文件斷點續(xù)傳
成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比襄州網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式襄州網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋襄州地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。
一、實現(xiàn)文件多選
HTML5的input新增了"multiple"屬性，該屬性可接受多個值的文件上傳字段
input type="file" multiple="multiple" name="file" id="file"
添加了該屬性用戶就可以在彈出的對話框中一次性選擇多個文件了
二、實現(xiàn)文件從計算機拖拽到網(wǎng)頁以及添加文件隊列功能
這里我們用 dragover 和 drop 兩個事件來管理文件拖拽的功能
其中 dragover 用來處理在指定的元素上移動時的事件，這里我們通過給body綁定dragover時間來處理頁面中拖動文件的事件
document.body.addEventListener('dragover', dragFile, false);
function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
用 drop 事件來處理鼠標松開時候的事件，此時應(yīng)該將用戶拖動過來的文件加入到上傳隊列中，以供后續(xù)的處理
document.body.addEventListener('drop', dropFile, false);
function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
// dataTransfer.files屬性可以獲取到所有拖動選擇的文件，通過遍歷可以讀取到所有文件的信息。
// 遍歷每個文件可以獲取到文件的 name、size、type、lastModifiedDate等關(guān)鍵信息
var files = evt.dataTransfer.files;
// addfile 方法 用來添加上傳文件隊列，在input的change事件中也需要調(diào)用
// 該方法首先檢查有無文件正在上傳中，如果有就將后續(xù)加入的文件放到上傳隊列中，如果沒有文件正在上傳就直接執(zhí)行上傳命令
addfile(files);
}
三、文件續(xù)傳原理
目前比較常用的斷點續(xù)傳的方法有兩種，一種是通過websocket接口進行文件上傳，另一種是通過ajax，兩種方法各有千秋，雖然websocket聽起來比較高端些~ 但是除了用了不同的協(xié)議外其他的算法基本上都是很相似的，并且服務(wù)端要開啟ws接口，這里用相對方便的ajax來說明斷點上傳的思路。
說來說去，斷點續(xù)傳最核心的內(nèi)容就是把文件“切片”然后再一片一片的傳給服務(wù)器，但是這看似簡單的上傳過程卻有著無數(shù)的坑。
首先是文件的識別，一個文件被分成了若干份之后如何告訴服務(wù)器你切了多少塊，以及最終服務(wù)器應(yīng)該如何把你上傳上去的文件進行合并，這都是要考慮的。
因此在文件開始上傳之前，我們和服務(wù)器要有一個“握手”的過程，告訴服務(wù)器文件信息，然后和服務(wù)器約定切片的大小，當和服務(wù)器達成共識之后就可以開始后續(xù)的文件傳輸了。
前臺要把每一塊的文件傳給后臺，成功之后前端和后端都要標識一下，以便后續(xù)的斷點。
當文件傳輸中斷之后用戶再次選擇文件就可以通過標識來判斷文件是否已經(jīng)上傳了一部分，如果是的話，那么我們可以接著上次的進度繼續(xù)傳文件，以達到續(xù)傳的功能。
四、文件的前端切片
有了HTML5 的 File api之后切割文件比想想的要簡單的多的多。
只要用slice 方法就可以了
var packet = file.slice(start, end);
參數(shù)start是開始切片的位置，end是切片結(jié)束的位置 單位都是字節(jié)。通過控制start和end 就可以是實現(xiàn)文件的分塊
如
file.slice(0,1000);
file.slice(1000,2000);
file.slice(2000,3000);
// ......
五、文件片段的上傳
上一部我們通過slice方法把文件分成了若干塊，接下來要做的事情就是把這些碎片傳到服務(wù)器上。
這里我們用ajax的post請求來實現(xiàn)
textpop-up
var xhr = new XMLHttpRequest();
var url = xxx // 文件上傳的地址 可以包括文件的參數(shù) 如文件名稱 分塊數(shù)等以便后臺處理
xhr.open('POST', url, true);
xhr.onload = function (e){
// 判斷文件是否上傳成功，如果成功繼續(xù)上傳下一塊，如果失敗重試該快
}
xhr.upload.onprogress = function(e){
// 選用 如果文件分塊大小較大 可以通過該方法判斷單片文件具體的上傳進度
// e.loaded 該片文件上傳了多少
// e.totalSize 該片文件的總共大小
}
xhr.send(packet);
1、文件過大會導(dǎo)致帶寬資源緊張，請求速度下降 ；
2、如果上傳過程中服務(wù)中斷、網(wǎng)絡(luò)中斷 、頁面崩潰，可能會導(dǎo)致文件重新開始上傳。
前端選擇文件后上傳，后端在處理文件過程中，首先會將文件加載到 運行內(nèi)存中 ，之后再調(diào)用相應(yīng)的API進行 寫入硬盤 內(nèi)存的操作，完成整個文件的上傳。
但這樣直接上傳文件，可能會因為某個環(huán)節(jié)出了問題導(dǎo)致整個流程的雪崩，所以大文件直接上傳是不可取的。
解決問題最好辦法是 分片斷點續(xù)傳 ，該方式主要是針對 大文件（比如100M以上的文件） 。
顧名思義就是 斷點 和 續(xù)傳
在文件上傳過程中，將一個要上傳的文件 分成N塊 ，然后使用 多線程并發(fā)多塊上傳 ，因為某種原因?qū)е律蟼鞅恢袛嗷驎和＃藭r中斷或暫停的位置就成為 斷點 。
前端每上傳一片，將會被加載到 運行內(nèi)存中 ，加載完畢后再寫入硬盤，此時運行內(nèi)存的臨時變量會被釋放，然后此臨時變量會被下一片占用，再進行寫入，釋放...
意思是指從中斷的位置繼續(xù)上傳剩下的部分文件，而不是從頭開始上傳。
上傳完畢后，在服務(wù)端進行合并（合并的操作是在后端進行的，前端只是調(diào)用接口，合并的方式是由后端決定的，到底是上傳一片就合并一片，或者是上傳所有的之后整體進行合并）。
方式：
html5z之前的方式是 flash 和 activeX
html5提供了文件二進制流進行分割的slice方法。
文件的分片，一般在2-5M之間。這一步得到了每一片文件的內(nèi)容、每一塊的序號、每一塊的大小、總塊數(shù)等數(shù)據(jù)。
這里提供了兩個方法；一種是用SparkMD5.hashBinary( ) 直接將整個文件的二進制碼傳入直接返回文件的md5、這種方法對于小文件會比較有優(yōu)勢——簡單并且速度快。
另一種方法是利用js中File對象的slice( )方法（File.prototype.slice( )）將文件分片后逐個傳入spark.appendBinary( )方法來計算、最后通過spark.end( )方法輸出結(jié)果，很明顯，這種方法對于大型文件會非常有利——不容易出錯，并且能夠提供計算的進度信息
第一種方式：
第二種方式
可以把進度信息放在cookie里，下次打開瀏覽器，到上傳頁面以后，從cookie中上次的讀取進度信息，上傳時，讀取上傳文件到上次進度位置，繼續(xù)上傳
首先需要明確，上傳這東西不僅僅是只需要前端就能完成的很好的，需要前端后端統(tǒng)一數(shù)據(jù)格式，從而實現(xiàn)斷點續(xù)傳。（所以，該文適合于全棧工程師，至少是想成為）
還有，為什么需要分片，不分片能實現(xiàn)斷點續(xù)傳嗎？分片是為了充分利用網(wǎng)絡(luò)帶寬，加快上傳速度；不分片也是能夠?qū)崿F(xiàn)斷點續(xù)傳的。詳細參考 HTML5文件上傳組件深度剖析.
分片上傳與斷點續(xù)傳之間沒有很直接的關(guān)系.
實現(xiàn)斷點續(xù)傳的前提是需要服務(wù)器記錄某文件的上傳進度，那么根據(jù)什么判斷是不是同一個文件呢？可以利用文件內(nèi)容求md5碼，如果文件過大，求取md5碼也是一個很長的過程，所以對于大文件，只能針對某一段數(shù)據(jù)進行計算，加上服務(wù)器對cookie用戶信息的判斷，得到相對唯一的key。
在前端頁面，需要將文件按照一定大小進行分片，一次請求只發(fā)送這一小片數(shù)據(jù)，所以我們可以同時發(fā)起多個請求。但一次同時請求的連接數(shù)不宜過多，服務(wù)器負載過重。對于文件分片操作，H5具有十分強大的File API，直接利用File對象的slice方法即可得到Blob對象。
至于同時傳輸數(shù)據(jù)的連接數(shù)控制邏輯，就需要花點腦子思考了。前端把數(shù)據(jù)順利得傳給服務(wù)器了，服務(wù)器只需要按照數(shù)據(jù)中給的開始字節(jié)位置，與讀取到的文件片段數(shù)據(jù)，寫入文件即可
重慶分公司
重慶分公司
