什麼是FileReader類型?
FileReader類型實現的是一種非同步檔讀取機制， 通常可以用於讀取文字檔和圖片檔， 而本文只單獨講講文字檔的讀取。
使用FileReader讀取文字檔內容主要用到以下方法、事件和屬性：
方法： readAsText()
事件： load
屬性： result
二、結合具體實例講解文字讀取流程1. HTML結構
主要用到input元素， type屬性值為file， 用於從本地獲取檔。
通過以上代碼在選擇檔時一次只能選擇一個， 若要一次選擇多個檔， 可在標籤上加上multiple="multiple"屬性值， 或者直接寫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 物件
③ 讀取檔中的文字內容
reader.readAsText(fileVal,'gb2312');readAsText() 用於將檔中的內容以純文字的形式讀取， 讀取到的文本會保存在 result 屬性中（注意該方法執行沒有返回值）， 可傳入兩個參數：檔物件和文本編碼類型。
注意： 這裡第二個參數最好寫上'gb2312'編碼類型， 否則可能出現文字亂碼問題。
④ 檔讀取成功後輸出文本內容
reader.onload = function(){ var text = this.result; console.log(text);};通過 readAsText() 方法讀取到的純文字內容保存在 result 屬性中。
示例代碼為了讓大家能夠從整體上更加清晰的瞭解文字讀取的流程， 在此貼上以上實例中的完整代碼：
// 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('').join(''); document.body.appendChild(p); };});
以上代碼中，
text.split(' ').join('
')的作用是將文字檔中的分行符號轉換為
，
代表文本回車換行。