FileReader類型之文字讀取

一、什麼是FileReader類型?

FileReader類型實作的是一種異步檔案讀取機制，通常可以用于讀取文本檔案和圖檔檔案，而本文隻單獨講講文本檔案的讀取。

使用FileReader讀取文本檔案内容主要用到以下方法、事件和屬性：

方法： readAsText()

事件： load

屬性： result

二、結合具體執行個體講解文字讀取流程

1. HTML結構

主要用到input元素，type屬性值為file，用于從本地擷取檔案。

<input type="file" id="file" />
           

通過以上代碼在選擇檔案時一次隻能選擇一個，若要一次選擇多個檔案，可在标簽上加上

multiple="multiple"

屬性值，或者直接寫

multiple

。

<input type="file" id="file" multiple="multiple" />
           

或者：

<input type="file" id="file" multiple />
           

2. 給input元素加上change事件

var file = document.getElementById("file");
file.addEventListener('change',function(){
    //........  
});
           

當我們點選按鈕并成功選擇檔案時會執行以下 3 中的代碼。

3. 讀取文本檔案中的文字内容

① 擷取已從本地選擇的檔案

var fileVal = this.files[0];    // 擷取所選檔案中的第一個檔案
           

這裡用到了 File API，每個 File 對象對應一個檔案，每個 File 對象有下面幾種屬性：

name： 本地檔案名

size： 檔案的位元組大小

type： 檔案的 MIME 類型

lastModifiedDate： 檔案上一次被修改的時間

比如想要擷取檔案名可以這樣寫：

var fileName = this.files[0].name   // 擷取到的檔案名中包含檔案字尾
           

② 建立 FileReader 對象

var reader = new FileReader();
           

③ 讀取檔案中的文字内容

reader.readAsText(fileVal,'gb2312');
           

readAsText() 用于将檔案中的内容以純文字的形式讀取，讀取到的文本會儲存在 result 屬性中（注意該方法執行沒有傳回值），可傳入兩個參數：檔案對象和文本編碼類型。

注意： 這裡第二個參數最好寫上

'gb2312'

編碼類型，否則可能出現文字亂碼問題。

④ 檔案讀取成功後輸出文本内容

reader.onload = function(){
    var text = this.result;
    console.log(text);
};
           

通過 readAsText() 方法讀取到的純文字内容儲存在 result 屬性中。

三、最終完整執行個體代碼

為了讓大家能夠從整體上更加清晰的了解文字讀取的流程，在此貼上以上執行個體中的完整代碼：

<!--HTML部分-->
<input type="file" id="file" multiple />
           

// JavaScript部分
var file = document.getElementById("file");
file.addEventListener('change',function(){
    var fileVal = this.files[0];
    var reader = new FileReader();
    reader.readAsText(fileVal,'gb2312');
    reader.onload = function(){
        var text = this.result;
        var p = document.createElement('p');
        p.innerHTML = text.split('\n').join('<br>');
        document.body.appendChild(p);
    };
});
           

以上代碼中，

text.split('\n').join('<br>')

的作用是将文本檔案中的換行符轉換為<br>，\n代表文本回車換行。