一、什么是FileReader類型?

FileReader類型實(shí)現(xiàn)的是一種異步文件讀取機(jī)制，通常可以用于讀取文本文件和圖片文件，而本文只單獨(dú)講講文本文件的讀取。

使用FileReader讀取文本文件內(nèi)容主要用到以下方法、事件和屬性：

方法： readAsText()
事件： load
屬性： result

二、結(jié)合具體實(shí)例講解文字讀取流程

1. HTML結(jié)構(gòu)

主要用到input元素，type屬性值為file，用于從本地獲取文件。

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

通過以上代碼在選擇文件時一次只能選擇一個，若要一次選擇多個文件，可在標(biāo)簽上加上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(){//........ });

當(dāng)我們點(diǎn)擊按鈕并成功選擇文件時會執(zhí)行以下 3 中的代碼。

3. 讀取文本文件中的文字內(nèi)容

① 獲取已從本地選擇的文件

var fileVal = this.files[0]; // 獲取所選文件中的第一個文件

這里用到了 File API，每個 File 對象對應(yīng)一個文件，每個 File 對象有下面幾種屬性：

name： 本地文件名
size： 文件的字節(jié)大小
type： 文件的 MIME 類型
lastModifiedDate： 文件上一次被修改的時間

比如想要獲取文件名可以這樣寫：

var fileName = this.files[0].name // 獲取到的文件名中包含文件后綴

② 新建 FileReader 對象

var reader = new FileReader();

③ 讀取文件中的文字內(nèi)容

reader.readAsText(fileVal,'gb2312');

readAsText() 用于將文件中的內(nèi)容以純文本的形式讀取，讀取到的文本會保存在 result 屬性中（注意該方法執(zhí)行沒有返回值），可傳入兩個參數(shù)：文件對象和文本編碼類型。

注意： 這里第二個參數(shù)最好寫上'gb2312'編碼類型，否則可能出現(xiàn)文字亂碼問題。

④ 文件讀取成功后輸出文本內(nèi)容

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

通過 readAsText() 方法讀取到的純文本內(nèi)容保存在 result 屬性中。

三、最終完整實(shí)例代碼

為了讓大家能夠從整體上更加清晰的了解文字讀取的流程，在此貼上以上實(shí)例中的完整代碼：

<!--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>')的作用是將文本文件中的換行符轉(zhuǎn)換為<br>，\n代表文本回車換行。

總結(jié)

以上是生活随笔為你收集整理的FileReader类型之文字读取的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。