var reader = new FileReader();

事件

使用方法

FileReader通過異步的方式讀取文件內容，結果均是通過事件回調獲取，下面是一個讀取本地txt文件內容的例子：

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(){
            //讀取完畢后輸出結果
            console.log(this.result);
        }
    }
}

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

讀取方式

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

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

接著編寫測試代碼：

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

readAsDataURL

查看圖片輸出結果：

查看txt輸出結果：

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

readAsText

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

查看圖片輸出結果：

查看txt輸出結果：

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

readAsBinaryString

查看圖片輸出結果：

查看txt輸出結果：

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

readAsArrayBuffer

查看圖片輸出結果：

查看txt輸出結果：

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

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

應用場景

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

在線預覽本地文件

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

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

運行效果如下：

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

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

HTML5體系的建立引入了一大堆新的東西，基于XHR2，我們可以直接上傳或下載二進制內容，無需像以往一樣通過form標簽由后端拉取二進制內容。
簡單整理下上傳邏輯：
1、通過input[type="file"]標簽獲取本地文件File對象
2、通過FileReader的readAsArrayBuffer方法將File對象轉換為ArrayBuffer
3、創(chuàng)建xhr對象，配置請求信息
4、通過xhr.sendAsBinary直接將文件的ArrayBuffer內容裝填至post body后發(fā)送
代碼實現(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ā)送二進制數(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){
                // 響應成功       
            }
        }
    }
}

總結

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

參考資料

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

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