寫在前面

前一篇文章介紹了HTML5中的Blob對象（詳情戳這里），從中了解到Blob對象只是二進(jìn)制數(shù)據(jù)的容器，本身并不能操作二進(jìn)制，故本篇將對其操作對象FileReader進(jìn)行介紹。

FileReader

FileReader主要用于將文件內(nèi)容讀入內(nèi)存，通過一系列異步接口，可以在主線程中訪問本地文件。

使用FileReader對象，web應(yīng)用程序可以異步的讀取存儲在用戶計(jì)算機(jī)上的文件(或者原始數(shù)據(jù)緩沖)內(nèi)容，可以使用File對象或者Blob對象來指定所要處理的文件或數(shù)據(jù)。

創(chuàng)建實(shí)例

var reader = new FileReader();

方法

事件

使用方法

FileReader通過異步的方式讀取文件內(nèi)容，結(jié)果均是通過事件回調(diào)獲取，下面是一個讀取本地txt文件內(nèi)容的例子：

var input  = document.getElementById("file"); //input file
input.onchange = function(){
    var file = this.files[0];
    if(!!file){
        //讀取本地文件，以gbk編碼方式輸出
        var reader = new FileReader();
        reader.readAsText(file,"gbk");
        reader.onload = function(){
            //讀取完畢后輸出結(jié)果
            console.log(this.result);
        }
    }
}

此外我們還可以通過注冊onprogress、onerror等事件，記錄文件讀取進(jìn)度或異常行為等等。

讀取方式

FileReader提供了四種不同的讀取文件的方式，如：readAsArrayBuffer會將文件內(nèi)容讀取為ArrayBuffer對象，readAsBinaryString則將文件讀取為二進(jìn)制串，下面對這四種方式進(jìn)行簡單區(qū)分。

首先準(zhǔn)備一張圖片（6764 字節(jié)）和一個txt文本（51字節(jié)）作為測試文件：

接著編寫測試代碼：

 var reader = new FileReader();
// 通過四種方式讀取文件
//reader.readAsXXX(file);   
reader.onload = function(){
    //查看文件輸出內(nèi)容
    console.log(this.result);
    //查看文件內(nèi)容字節(jié)大小
    console.log(new Blob([this.result]))
}

readAsDataURL

查看圖片輸出結(jié)果：

查看txt輸出結(jié)果：

很明顯，readAsDataURL會將文件內(nèi)容進(jìn)行base64編碼后輸出，這個很好區(qū)分。

readAsText

此方法可以通過不同的編碼方式讀取字符，我們使用utf-8讀取

查看圖片輸出結(jié)果：

查看txt輸出結(jié)果：

readAsText讀取文件的單位是字符，故對于文本文件，只要按規(guī)定的編碼方式讀取即可；
而對于媒體文件（圖片、音頻、視頻），其內(nèi)部組成并不是按字符排列，故采用readAsText讀取，會產(chǎn)生亂碼，同時也不是最理想的讀取文件的方式

readAsBinaryString

查看圖片輸出結(jié)果：

查看txt輸出結(jié)果：

與readAsText不同的是，readAsBinaryString函數(shù)會按字節(jié)讀取文件內(nèi)容。
然而諸如0101的二進(jìn)制數(shù)據(jù)只能被機(jī)器識別，若想對外可見，還是需要進(jìn)行一次編碼，而readAsBinaryString的結(jié)果就是讀取二進(jìn)制并編碼后的內(nèi)容。
盡管readAsBinaryString方法可以按字節(jié)讀取文件，但由于讀取后的內(nèi)容被編碼為字符，大小會受到影響，故不適合直接傳輸，也不推薦使用。
如：測試的圖片文件原大小為6764 字節(jié)，而通過readAsBinaryString讀取后，內(nèi)容被擴(kuò)充到10092個字節(jié)

readAsArrayBuffer

查看圖片輸出結(jié)果：

查看txt輸出結(jié)果：

與readAsBinaryString類似，readAsArrayBuffer方法會按字節(jié)讀取文件內(nèi)容，并轉(zhuǎn)換為ArrayBuffer對象。
我們可以關(guān)注下文件讀取后大小，與原文件大小一致。
這也就是readAsArrayBuffer與readAsBinaryString方法的區(qū)別，readAsArrayBuffer讀取文件后，會在內(nèi)存中創(chuàng)建一個ArrayBuffer對象（二進(jìn)制緩沖區(qū)），將二進(jìn)制數(shù)據(jù)存放在其中。通過此方式，我們可以直接在網(wǎng)絡(luò)中傳輸二進(jìn)制內(nèi)容。
好了說這么多，那ArrayBuffer到底是個毛？
關(guān)于ArrayBuffer對象牽涉的知識點(diǎn)比較多，完全可以單開一篇細(xì)說，在此只要簡單理解為存放了一段二進(jìn)制數(shù)據(jù)的內(nèi)存空間即可。
而本身ArrayBuffer中的內(nèi)容對外是不可見的，若要查看其中的內(nèi)容，就要引入另一個概念：類型化數(shù)組
我們可以嘗試查看下剛剛通過readAsArrayBuffer方法讀取的圖片文件內(nèi)容：

可以看到，整個圖片文件的6764個字節(jié)，被分別存儲在長度為6764的數(shù)組中，而數(shù)組中每一個元素的值，為當(dāng)前字節(jié)的十進(jìn)制數(shù)值。
關(guān)于ArrayBuffer和類型化數(shù)組的概念在此不做深入解釋，之后會再寫一篇單獨(dú)討論。

應(yīng)用場景

說了這么多，最后還是要落實(shí)到FileReader能解決什么問題，下面通過幾個例子說明：

在線預(yù)覽本地文件

我們知道，img的src屬性或background的url屬性，可以通過被賦值為圖片網(wǎng)絡(luò)地址或base64的方式顯示圖片。
在文件上傳中，我們一般會先將本地文件上傳到服務(wù)器，上傳成功后，由后臺返回圖片的網(wǎng)絡(luò)地址再在前端顯示。
通過FileReader的readAsDataURL方法，我們可以不經(jīng)過后臺，直接將本地圖片顯示在頁面上。這樣做可以減少前后端頻繁的交互過程，減少服務(wù)器端無用的圖片資源，代碼如下：

var input  = document.getElementById("file");   // input file
input.onchange = function(){
    var file = this.files[0];
        if(!!file){
            var reader = new FileReader();
            // 圖片文件轉(zhuǎn)換為base64
            reader.readAsDataURL(file);
            reader.onload = function(){
                // 顯示圖片
                document.getElementById("file_img").src = this.result;
        }
    }
}

運(yùn)行效果如下：

對于圖片上傳，我們也可以先將圖片轉(zhuǎn)換為base64進(jìn)行傳輸，此時由于傳輸?shù)膱D片內(nèi)容就是一段字符串，故上傳接口可以當(dāng)做普通post接口處理，當(dāng)圖片傳輸?shù)胶笈_后，可以在轉(zhuǎn)換為文件實(shí)體存儲。
當(dāng)然，考慮到base64轉(zhuǎn)換效率及其本身的大小，本方法還是適合于上傳內(nèi)容簡單或所占內(nèi)存較小的文件。

二進(jìn)制數(shù)據(jù)上傳

HTML5體系的建立引入了一大堆新的東西，基于XHR2，我們可以直接上傳或下載二進(jìn)制內(nèi)容，無需像以往一樣通過form標(biāo)簽由后端拉取二進(jìn)制內(nèi)容。
簡單整理下上傳邏輯：
1、通過input[type="file"]標(biāo)簽獲取本地文件File對象
2、通過FileReader的readAsArrayBuffer方法將File對象轉(zhuǎn)換為ArrayBuffer
3、創(chuàng)建xhr對象，配置請求信息
4、通過xhr.sendAsBinary直接將文件的ArrayBuffer內(nèi)容裝填至post body后發(fā)送
代碼實(shí)現(xiàn)如下：

var input  = document.getElementById("file");   // input file
input.onchange = function(){
    var file = this.files[0];
        if(!!file){
            var reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = function(){
                var binary = this.result;
                upload(binary);
        }
    }
}

//文件上傳
function upload(binary){
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://xxxx/opload");
    xhr.overrideMimeType("application/octet-stream");
    //直接發(fā)送二進(jìn)制數(shù)據(jù)
    if(xhr.sendAsBinary){
        xhr.sendAsBinary(binary);
    }else{
        xhr.send(binary);
    }
    
    // 監(jiān)聽變化
    xhr.onreadystatechange = function(e){
        if(xhr.readyState===4){
            if(xhr.status===200){
                // 響應(yīng)成功       
            }
        }
    }
}

總結(jié)

本篇主要介紹了FileReader對象的屬性及應(yīng)用場景，有了FileReader，我們可以將本地文件讀取到內(nèi)存中。文中我們提到了ArrayBuffer和類型化數(shù)組的概念，這使得我們可以在內(nèi)存中進(jìn)一步操作二進(jìn)制數(shù)據(jù)，關(guān)于這部分內(nèi)容，會在之后的博客中進(jìn)行歸納。

參考資料

[1] MDN_FileReader
[2] Unicode 和 UTF-8 有何區(qū)別

到此這篇關(guān)于HTML5 FileReader對象的具體使用方法的文章就介紹到這了,更多相關(guān)HTML5 FileReader對象內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論