前言：FileReader是一種異步文件讀取機制，結合input:file可以很方便的讀取本地文件。
input:file
在介紹FileReader之前，先簡單介紹input的file類型。
<input type="file" id="inputBox">
input的file類型會渲染為一個按鈕和一段文字。點擊按鈕可打開文件選擇窗口，文字表示對文件的描述（大部分情況下為文件名）；file類型的input會有files屬性，保存着文件的相關信息。
點擊按鈕上傳一個文件后，在控制台打印input.files，如下：
可以發現input.files是一個數組，由傳入的file對象組成。每個file對象包含以下屬性：
lastModified：數值，表示最近一次修改時間的毫秒數；
lastModifiedDate：對象，表示最后一次表示最近一次修改時間的Date對象（高程中說是字符串，根據上圖可看出應該為對象，為了層級清晰未對其展開，大家可自行查看，其可調用Date對象的有關方法，例如getDay方法）；
name：本地文件系統中的文件名；
size：文件的字節大小；
type：字符串，文件的MIME類型；
weblitRelativePath：此處為空；當在input上加上webkitdirectory屬性時，用戶可選擇文件夾，此時weblitRelativePath表示文件夾中文件的相對路徑。比如：
<input type="file" id="inputBox" webkitdirectory>
點擊按鈕添加一個包含3個文件的名為php的文件夾后，控制台打印inputBox.files，如下：
可看出，此時weblitRelativePath表示當前file對象的文件在文件夾中的路徑。
FileReader
以上file對象只獲取到了對文件的描述信息，但沒有獲得文件中的數據，而inputBox.value也只是保存的是文件的絕對路徑（這里就不展示了，大家可以自己試一試）。我們可以通過html5提供的FileReader讀取到文件中的數據。
首先創建一個FileReader實例：
var reader = new FileReader();
方法
FileReader提供了如下方法：
| readAsArrayBuffer(file) | 按字節讀取文件內容，結果用ArrayBuffer對象表示 |
| readAsBinaryString(file) | 按字節讀取文件內容，結果為文件的二進制串 |
| readAsDataURL(file) | 讀取文件內容，結果用data:url的字符串形式表示 |
| readAsText(file,encoding) | 按字符讀取文件內容，結果用字符串形式表示 |
| abort() | 終止文件讀取操作 |
readAsDataURL和readAsText較為常用，這里只對這兩者進行說明。
readAsDataURL會將文件內容進行base64編碼后輸出：
var inputBox = document.getElementById("inputBox");
inputBox.addEventListener("change",function(){
var reader = new FileReader();
reader.readAsDataURL(inputBox.files[0]);//發起異步請求
reader.onload = function(){
//讀取完成后，數據保存在對象的result屬性中
console.log(this.result)
}
})
控制台為當前所傳文件的base64編碼表示。由於媒體文件的src屬性，可以通過采用網絡地址或base64的方式顯示，因此我們可以利用readAsDataURL實現對圖片的預覽。
<input type="file" id="inputBox" > <img src="" id="img">
var inputBox = document.getElementById("inputBox");
var img = document.getElementById("img");
inputBox.addEventListener("change",function(){
var reader = new FileReader();
reader.readAsDataURL(inputBox.files[0]);//發起異步請求
reader.onload = function(){
//讀取完成后，將結果賦值給img的src
img.src = this.result
}
})
如上，只需將讀取的結果賦給圖片的src屬性，即可預覽圖片：
readAsText(file,encoding)可按指定編碼方式讀取文件，但讀取文件的單位是字符，故對於文本文件，只要按規定的編碼方式讀取即可；而對於媒體文件（圖片、音頻、視頻），其內部組成並不是按字符排列，故采用readAsText讀取，會產生亂碼，因此不是最理想的讀取文件的方式。
事件
| onabort | 當讀取操作被中止時調用 |
| onerror | 當讀取操作發生錯誤時調用 |
| onload | 當讀取操作成功完成時調用 |
| onloadend | 當讀取操作完成時調用，無論成功或失敗 |
| onloadstart | 當讀取操作開始時調用 |
| onprogress | 在讀取數據過程中周期性調用 |
var inputBox = document.getElementById("inputBox");
var count=0;
inputBox.addEventListener("change",function(){
var reader = new FileReader();
reader.readAsText(inputBox.files[0],"utf-8");//發起異步請求
reader.onload = function(){
console.log("加載成功")
}
reader.onloadstart = function(){
console.log("開始加載")
}
reader.onloadend= function(){
console.log("加載結束")
}
reader.onprogress = function(){
count++;
console.log("加載中"+count)
}
})
每過50ms左右，就會觸發一次progress事件，對於較大的文件可以利用progress實現進度條；onload事件在onloadend之前觸發。
由於種種原因無法讀取文件時，會觸發error事件。觸發error事件時，相關信息保存在FileReader對象的error屬性中，這個屬性將保存一個對象，此對象只有一個屬性code，即錯誤碼。1表示未找到文件，2表示安全性錯誤，3表示讀取中斷，4表示文件不可讀，5表示編碼錯誤。
如果想中斷讀取過程，可以調用abort方法，就會觸發abort事件。
無論觸發load，error，abort事件中哪一個，最終都會觸發loadend事件。