FileReader 對象容許Web應用程序異步讀取存儲在用戶計算機上的文件(或原始數據緩衝區)的內容,使用 File 或 Blob 對象指定要讀取的文件或數據。javascript
其中File對象能夠是來自用戶在一個<input>元素上選擇文件後返回的FileList對象,也能夠來自拖放操做生成的 dataTransfer對象,還能夠是來自在一個Canvas上執行mozGetAsFile()方法後返回結果。
html
FileReader對象有如下幾個方法:java
用來終止該讀取操做,無返回值。git
開始讀取指定的Blob對象或File對象中的內容。當讀取操做完成時,會觸發onload()事件,所以能夠自定義onload()事件,同時,result屬性中將包含一個ArrayBuffer對象
以表示所讀取文件的內容。github
關於ArrayBuffer對象,表示一個通用的,固定長度的二進制數據緩衝區。你不能直接操縱ArrayBuffer的內容;
相反,你應該建立一個表示特定格式的buffer的類型化數組對象(typed array objects)或數據視圖對象DataView
來對buffer的內容進行讀取和寫入操做。數組
如何從現有數據獲取數組緩衝區?異步
function _base64ToArrayBuffer(base64) { var binary_string = window.atob(base64); var len = binary_string.length; var bytes = new Uint8Array( len ); for (var i = 0; i < len; i++) { bytes[i] = binary_string.charCodeAt(i); } return bytes.buffer; }
參考:https://stackoverflow.com/questions/21797299/convert-base64-string-to-arraybuffer函數
將File對象或者Blob對象讀取爲原始二進制數據ui
將File對象或者Blob對象讀取爲下圖所示的形式。編碼
上圖是我上傳的一個文本文件的結果,頭部指明瞭文件的類型以及編碼方式,在編碼方式以後就是該文件的base64編碼了。
這個方法在上傳預覽圖片時很是有用。例子以下:TXWSLYF.github.io/demos/HTML5圖片上傳預覽/HTML5圖片上傳預覽.html
開始讀取指定的Blob對象或File對象中的內容,result
屬性中將包含一個字符串以表示所讀取的文件內容。
以上說了FIleReader()的4中讀取方式,那麼它們又有什麼聯繫和區別呢?
base64編碼是經過readAsDataURL()方法獲得的,原始二進制數據是經過readAsBinaryString()方法的到的。他們之間的相互轉化能夠經過使用如下兩個方法:
window.atob()和window.btoa()
atob()
函數可以解碼經過base-64編碼的字符串數據。相反地,btoa()
函數可以從二進制數據「字符串」建立一個base-64編碼的ASCII字符串。
atob()
和 btoa()
均使用字符串。
看下面的例子:
for (i; i < fileList.length; i++) { var fileReader = new FileReader(); fileReader.onload = function (e) { var result = e.target.result; console.log(result) // console.log(window.btoa(result)) }; console.log(fileList[i].type); fileReader.readAsDataURL(fileList[i]); // fileReader.readAsBinaryString(fileList[i]) }
獲得了上傳文件的base64編碼以及文件類型
再看下面一段代碼:
for (i; i < fileList.length; i++) { var fileReader = new FileReader(); fileReader.onload = function (e) { var result = e.target.result; // console.log(result) console.log(window.btoa(result)) }; console.log(fileList[i].type); // fileReader.readAsDataURL(fileList[i]); fileReader.readAsBinaryString(fileList[i]) } });
能夠看到二進制數據被編碼爲base64的數據。
changeDataUrlToBlob = (dataUrl) => { let type = dataUrl.split(';')[0]; let data = window.atob(dataUrl.split(',')[1]); let ia = new Uint8Array(data.length); for (let i = 0; i < data.length; i++) { ia[i] = data.charCodeAt(i); } let blob = new Blob([ia], { type: type }); return blob; };
其中dataUrl參數是由readAsDataURL()方法返回的包含文件類型以及bae64編碼的字符串。
window.URL.createObjectURL(blob)