HTML5——FileReader詳解

FileReader 對象容許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。

其中File對象能夠是來自用戶在一個<input>元素上選擇文件後返回的FileList對象,也能夠來自拖放操做生成的 dataTransfer對象,還能夠是來自在一個Canvas上執行mozGetAsFile()方法後返回結果。

 

FileReader對象有如下幾個方法：

1.abort()

用來終止該讀取操做，無返回值。

 

2.readAsArrayBuffer()

開始讀取指定的Blob對象或File對象中的內容。當讀取操做完成時,會觸發onload()事件，所以能夠自定義onload()事件，同時,result屬性中將包含一個ArrayBuffer對象以表示所讀取文件的內容。

關於ArrayBuffer對象，表示一個通用的，固定長度的二進制數據緩衝區。你不能直接操縱ArrayBuffer的內容；相反，你應該建立一個表示特定格式的buffer的類型化數組對象(typed array objects)或數據視圖對象DataView 來對buffer的內容進行讀取和寫入操做。

 

如何從現有數據獲取數組緩衝區？

1. 從一個本地文件（通常是從<input>和拖拽生成的dataTransfer對象上獲取本地文件）
2. 從一個Base64字符串

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

 

3.readAsBinaryString()

將File對象或者Blob對象讀取爲原始二進制數據

 

4.readAsDataURL()

將File對象或者Blob對象讀取爲下圖所示的形式。

上圖是我上傳的一個文本文件的結果，頭部指明瞭文件的類型以及編碼方式，在編碼方式以後就是該文件的base64編碼了。

這個方法在上傳預覽圖片時很是有用。例子以下：TXWSLYF.github.io/demos/HTML5圖片上傳預覽/HTML5圖片上傳預覽.html

 

5.readAsText()

開始讀取指定的Blob對象或File對象中的內容，result屬性中將包含一個字符串以表示所讀取的文件內容。

 

以上說了FIleReader()的4中讀取方式，那麼它們又有什麼聯繫和區別呢？

 

1.base64編碼和原始二進制數據之間的互相轉化

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的數據。

 

2.base64編碼字符串轉換爲Blob對象

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編碼的字符串。

 

3.Blob對象轉換爲base64編碼字符串

window.URL.createObjectURL(blob)