前言，文件讀取是提高應用體驗度的必須接口，應用場景中需求很頻繁。
Js處理文件讀取，由於處於安全方面的考慮，在2000年以前，都是以“<input type="file">”字段來實現文件上傳，這樣有很多的局限性，比如無法在本地上傳時看到自己上傳的文件（如圖片），也無法讀取到文件內容，審查文件流大小。
HTML5中，主流瀏覽器引擎都支持新的FILE API，為“<input type="file">”提供一個files數組，包含每個文件，為每個文件對象提供4個屬性:name,size,type,lastModifiedDate,分別表示文件的名稱，文件流大小，MIME類型和上次被修改的時間。在實際應用中，有時為了控制上傳文件的大小，通過size就可以在前端提示用戶選擇合適范圍內大小的文件。
HTML5提供了一個原型FileReader,通過該原型的實例可以得到4個主要的方法：
- readAsText(file,encoding)，以純文本形式讀取文件，將讀取的文本保存到該實例對象的result屬性中。第二個參數指定編碼類型，是可選的;
- readeAsDataURL(file),讀取文件並將文件以數據URI的形式保存在result屬性中;
- readAsBinaryString(file)，讀取文件並將一個字符串保存在result屬性中，字符串中的每個字符表示一字節。
- readAsArrayBuffer(file):讀取文件並將一個包含文件內容的ArrayBuffer保存在result屬性中。
其中，通過readAsDataUrl(file)可以讀取到文件地址，如果是圖片文件，可以結合src屬性顯示圖片文件,
具體實例可以參考實例:https://github.com/Johnharvy/html-dom-tools/.
由於文件讀取加載的過程是異步的，即文件加載讀取是需要排隊等待時間的，所以FileReader也提供了幾個事件，用於在文件加載的各個階段觸發，分別為process,error和load,分別表示是否又讀取了新數據，是否發生了錯誤以及是否已經讀完了整個文件。
每次過50ms，就會觸發一次process事件，每次process事件都可以通過FileReader的result屬性讀取到文件的相關內容。
如果由於某些原因無法讀取文件，就會觸發error事件並默認帶一個參數code，有1，2，3，4，5個狀態值，分別表示未找到文件，安全性錯誤，讀取中斷，文件不可讀，編碼錯誤。
文件加載成功后，會觸發load事件，如果已發生error事件，就不再觸發load事件。