前幾天，我們已經認識了跟檔案相關的物件，包含:Blob, File, FileList, arryBuffer等。那接下來就可以開始看各種應用囉！

在開始進行應用前我們要先認識FileReader

FileReader

FileReader是HTML5中的javascript新物件。可以非同步的方式，讀取儲存本地端的檔案內容，讀取的格式可以是File或Blob。

看一下FileReader這個物件包含哪些屬性、方法和事件，我們大概就會有概念要怎麼使用

可以依照功能大概分類為

01. 讀取文件的『狀態』

1-1 屬性

• error: 當文件讀取有錯誤時顯示的錯誤訊息
• readyStatue:檔案讀取的狀態，呈現為數字：0,1,2
  • 0 - EMPTY 沒有檔案讀入
  • 1 - LOADING: 正在讀入檔案
  • 2 - DONE: 檔案讀取完成
  • 上圖的綠框框底下其實就有這些狀態

1-2 事件

• onabort : 檔案讀取被中斷時觸發
• onerror : 檔案讀取發生錯誤時觸發
• onload : 檔案讀取完成時觸發
• onloadstart: 檔案開始讀取時觸發
• onloadend: 每一次的檔案讀取結束後觸發(成功失敗都會)。在 onload or onerror之後
• onprogress： 讀取Blob內容時觸發

02. 讀取文件的『方法』

這邊是檔案讀取的時候可以用的不同方法，包含可以用不同的格式讀取。

方法

• abort() ： 中斷目前的讀取，呼叫後，readyState會是DONE
• readAsArrayBuffer() : 以ArrayBuffer物件讀入檔案內容
• readAsBinaryString() ： 以字串型式來表示讀入的原始二進位資料（raw binary data）
• readAsDataURL()：以dataURI格式（base64）讀入檔案內容
• readAsText():以文字字串型式讀入檔案內容

小結一下關於開始正式進入檔案處理應用的關係圖

1. 我們透過input file獲取檔案，可以轉換成File Object，而File Object是繼承Blob而來。
2. 取得檔案內容的方式可以使用 FileReader 或是 CreateObjectURL。兩者不同之處是：createObjectURL只是指向本地端檔案位置，顯示出檔案；而FileReader是真的去讀取檔案的內容，因此讀取的速度會受到檔案的大小影響，也會不同格式的讀取方式Ex. readArrayBuffer, readAsDataURL...

作了好多前置準備，備齊材料後，我們明天就可以開始燒菜啦！就是明天！我們正式進到檔案處理的應用～～～