1、File API
File對(duì)象是一種特定類型的Blob。FileReader, URL.createObjectURL(), createImageBitmap(), 以及XMLHttpRequest.send() 都接受Blobs和Files。
通過change事件，讀取到files集合就可以知道每個(gè)文件的信息。
File對(duì)象
{
lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),
name: "profile.pdf",
size: 135568,
type: "application/pdf"
}
需要注意的是，type是根據(jù)文件擴(kuò)展名來判斷的，所以并不是很可靠。根據(jù)上面File對(duì)象的信息其實(shí)就可以實(shí)現(xiàn)一些常用的功能了，比如限制文件上傳的大小，初步的限制文件上傳的類型(當(dāng)然也可以通過input元素的accept屬性來實(shí)現(xiàn)，但是最終的類型驗(yàn)證還是需要在服務(wù)器端實(shí)現(xiàn))。
File對(duì)象一般通過以下途徑返回的FileList對(duì)象獲?。?/p>
- <input type="file">的元素
- 拖拽操作的DataTransfer對(duì)象
- 通過在一個(gè)HTMLCanvasElement上調(diào)用mozGetAsFile() API
2、FileReader
FileReader對(duì)象讓web應(yīng)用程序可以異步地讀取存儲(chǔ)在用戶電腦上的文件(或者原始數(shù)據(jù)緩沖區(qū))的內(nèi)容。在JavaScript中，F(xiàn)ileReaderd對(duì)象通過傳入兩種相應(yīng)的對(duì)象(File和Blob)來進(jìn)行數(shù)據(jù)的讀取，而且這個(gè)方法在Web Workers中也能使用。
FileReader 包括四個(gè)異步讀取文件的選項(xiàng)：
FileReader.readAsBinaryString(Blob|File) - 返回值的result 屬性將包含二進(jìn)制字符串形式的file/blob 數(shù)據(jù)。每個(gè)字節(jié)均由一個(gè) [0..255] 范圍內(nèi)的整數(shù)表示。
FileReader.readAsText(Blob|File, opt_encoding) - 返回值的result 屬性將包含文本字符串形式的 file/blob 數(shù)據(jù)。該字符串在默認(rèn)情況下采用“UTF-8”編碼。使用可選編碼參數(shù)可指定其他格式。
FileReader.readAsDataURL(Blob|File)- readAsDataURL 方法會(huì)讀取指定的 Blob 或 File 對(duì)象。讀取操作完成的時(shí)候，readyState 會(huì)變成已完成DONE，并觸發(fā) loadend 事件，同時(shí) result 屬性將包含一個(gè)data:URL格式的字符串（base64編碼）以表示所讀取文件的內(nèi)容。
FileReader.readAsArrayBuffer(Blob|File) - 返回值的result 屬性將包含 ArrayBuffer 對(duì)象形式的 file/blob 數(shù)據(jù)。
FileReader 對(duì)象調(diào)用其中某一種讀取方法后，可使用 onloadstart、onprogress、onload、onabort、onerror 和 onloadend 跟蹤其進(jìn)度。
2.1 事件:
progress 是否又讀取了新數(shù)據(jù)
每過50ms，就會(huì)觸發(fā)一次onprogress事件，通過事件對(duì)象可以獲得與XHR的progress事件相同的信息: lengthComputable、loaded、 total。使用loaded / total 可以判斷當(dāng)前進(jìn)度。
reader.onprogress = function(e) {
if (e.lengthComputable){
progress.innerHTML = e.loaded / e.total
}
}
error 是否出錯(cuò)
load 是否讀完
abort 中斷讀取過程
loadend 結(jié)束（讀完了、出錯(cuò)了、中斷了）
3 讀取部分內(nèi)容
可以節(jié)省時(shí)間，特定的情況下，比如只想要文件的開頭。
File對(duì)象支持slice方法，slice方法支持兩個(gè)參數(shù)，起始字節(jié) 要讀取的字節(jié)數(shù)。該方法返回一個(gè)Blob實(shí)例，Blob是File類型的父類型。
4 對(duì)象URL
不必將文件內(nèi)容讀取到JS中，而直接使用文件內(nèi)容。
引用保存在File或Blob中的數(shù)據(jù)URL。
使用window.URL.crateObjectURL()方法，并傳入File或Blob對(duì)象。
直接把對(duì)象URL放入img標(biāo)簽中，img標(biāo)簽會(huì)找到相應(yīng)的內(nèi)存地址，讀取數(shù)據(jù)將圖片顯示在頁(yè)面上。
不需要相應(yīng)的數(shù)據(jù)時(shí)，最好釋放內(nèi)存。因?yàn)橛写a引用對(duì)象URL，內(nèi)存就不會(huì)釋放，需要手動(dòng)釋放內(nèi)存。使用window.URL.revokeObjectURL()。
5 讀取拖放的文件
拖動(dòng)文件到瀏覽器中時(shí)，獲取文件信息。使用event.dataTransfer.files讀取被放置的文件
拖拽事件：
drag(開始拖動(dòng)，持續(xù)事件)
dragend(釋放鼠標(biāo)或者按下ESC，結(jié)束拖動(dòng))
dragenter(進(jìn)入有效的拖拽區(qū)域時(shí))
dragexit(當(dāng)一個(gè)元素不再是拖動(dòng)操作的直接選擇目標(biāo)時(shí))
dragleave(離開有效的拖拽區(qū)域時(shí))
dragover(懸停在有效的拖拽區(qū)域內(nèi)時(shí)，持續(xù)事件)
dragstart(開始拖動(dòng))
drop(目標(biāo)放置到有效的拖拽區(qū)域時(shí))
6 使用XHR上傳文件
創(chuàng)建一個(gè)FormData對(duì)象，將File對(duì)象傳入。
