前幾天，我們已經認識了跟檔案相關的物件，包含: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() :以文字字串型式讀入檔案內容

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

我們透過input file獲取檔案，可以轉換成File Object，而File Object是繼承Blob而來。

取得檔案內容的方式可以使用 FileReader 或是 CreateObjectURL。兩者不同之處是：createObjectURL只是指向本地端檔案位置，顯示出檔案；而FileReader是真的去讀取檔案的內容，因此讀取的速度會受到檔案的大小影響，也會不同格式的讀取方式Ex. readArrayBuffer, readAsDataURL...

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