HTML5進階FileReader的使用

FileReader 物件FileReader 物件主要用來把檔案讀入記憶體，並且讀取檔案中的資料。透過建構函式建立一個 FileReader 物件。

這個檔案讀取物件有以下幾種方法：

1.readAsText():讀取文字檔案(可以使用Txt開啟的檔案)，返回文字字串，預設編碼是UTF-8。

2.readAsBinaryString():讀取任意型別的檔案。返回二進位制字串。這個方法不是用來讀取檔案展示給使用者看，而是儲存檔案。例如：讀取檔案的內容，獲取二進位制資料，傳遞給後臺，後臺接收了資料之後，再將資料儲存。

3.readAsDataURL():讀取檔案獲取一段以data開頭的字串，這段字串的本質就是DataURL.DataURL是一種將檔案(這個檔案一般就是指影像或者能夠嵌入到文件的檔案格式)嵌入到文件的方案。DataURL是將資源轉換為base64編碼的字串形式，並且將這些內容直接儲存在url中>>最佳化網站的載入速度和執行效率。

為了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成為前端工程師，乃至全棧工程師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習扣qun：784783012 歡迎大家進群。交流討論，學習交流，共同進步。
當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。
但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有效資源還是很有必要的。
學習前端，我們是認真的

4.abort():中斷讀取

該物件常見應用在即時預覽：

即時：當使用者選擇完圖片之後就立刻進行預覽的處理 >>onchange

預覽：透過檔案讀取物件的readAsDataURL()完成。

以下是應用時的具體實現：

·  HTML部分

· JS部分

其中獲取資料時，FileReader還提供一個完整的事件模型，用來捕獲讀取檔案時的狀態。

    onabort:讀取檔案中斷片時觸發
    onerror:讀取錯誤時觸發
    onload:檔案讀取成功完成時觸發
    onloadend:讀取完成時觸發，無論成功還是失敗
    onloadstart:開始讀取時觸發
    onprogress:讀取檔案過程中持續觸發