FileReader api

FileReader API

FileReader api爲用戶提供了方法去讀取一個文件或者一個二進制大對象，而且提供了事件模型讓用戶能夠操做讀取後的結果。

接口

// window, worker中可用
  [Constructor, Exposed=Window,Worker]
  // 實現EventTarget的FileReader接口聲明
  interface FileReader: EventTarget {

    // 異步的讀取方法
    // 直接讀取二進制大對象爲ArrayBuffer類型
    void readAsArrayBuffer(Blob blob);
    
    // 讀取爲文本,第二個參數可指定編碼類型
    void readAsText(Blob blob, optional DOMString label);
    
    // 讀取爲base64格式
    void readAsDataURL(Blob blob);

    // 中斷讀取
    void abort();

    // 狀態常量
    
    // 尚未加載任何數據
    const unsigned short EMPTY = 0;
    
    // 數據正在加載中
    const unsigned short LOADING = 1;
    
    // 已完成所有的讀取請求
    const unsigned short DONE = 2;

    // 只讀，獲取常量中的某一個狀態
    readonly attribute unsigned short readyState;

    // 返回文件結果，只讀的，只有在讀取結束後纔有效
    // 數據的格式取決於讀取操做是由哪一個方法發起的
    readonly attribute (DOMString or ArrayBuffer)? result;

    // 若是讀取時發生錯誤，只讀的
    readonly attribute DOMError? error;

    // 事件方法屬性
    
    // 當讀取開始時的事件
    attribute EventHandler onloadstart;
    
    // 當進行時的事件
    attribute EventHandler onprogress;
    
    // 當讀取時的事件
    attribute EventHandler onload;
    
    // 當取消時的事件
    attribute EventHandler onabort;
    
    // 當錯誤時的事件
    attribute EventHandler onerror;
    
    // 當讀取完成的事件
    attribute EventHandler onloadend;

  };

構造器

當FileReader構造器被調用的時候，用戶代理必須返回一個新的FileReader對象。該構造器必須在Window 或者 WorkerGlobalScope 環境下可用.

事件處理屬性

下列的內容是事件處理屬性和他們的事件處理類型：

事件處理屬性	事件處理類型
onloadstart	loadstart
onprogress	progress
onabort	abort
onerror	error
onload	load
onloadend	loadend

FileReader States 狀態

FileReader對象有三種狀態，在readyState屬性中，當觸發getting訪問操做，必然會返回一個FileReader的當前狀態，而他的值必然是下面三個中的其中一個：

EMPTY (數字值爲 0)

當FileReader對象唄建立的時候，是不存在pending讀取狀態的，由於此時沒有任何讀取方法被調用。這個空狀態是建立FileReader時候的初始狀態，直到某個讀取方法被調用。

LOADING (數字值爲 1)

當一個文件或者二進制大對象正在被讀取，某一個讀取方法正在進行的時候，而且沒有錯誤發生的時候，狀態爲loading

DONE (數字值爲2)

當文件對象或者二進制大對象被讀入內存的時候，或者發生一個讀取錯誤的時候，或者用戶調用了abort()操做的時候，這個時候，FileReader再也不進行讀取，若是狀態被設置爲了完成，這意味着某一個讀取方法被調用過了

讀取一個文件或者二進制大對象(Blob)

FileReader接口有三個異步讀取方法，readAsArrayBuffer, readAsText, and readAsDataURL,他們能夠把文件讀入內存，若是多個讀取方法同時被調用（一個FileReader對象上）,用戶代理必須在任何讀取進行中的時候拋出一個非法狀態錯誤

result屬性

當訪問result屬性，該屬性將會返回一個原始二進制數據或者一個ArrayBuffer對象或者null以表示所讀取文件的內容.

• 當訪問該屬性的時候，若是準備狀態爲EMPTY，你將獲得一個null結果
• 當訪問該屬性的時候，若是讀取過程當中發生了錯誤，你將獲得一個null結果
• 當訪問該屬性的時候，若是是使用了readAsBataURL讀取方法，result屬性必然會返回一個DataURL編碼的字符串
• 當訪問該屬性的時候，若是readAsText讀取方法被調用，而且沒發生錯誤，該屬性將返回指定編碼的文檔字符串。
• 當訪問該屬性的時候，若是readAsArrayBuffer方法被調用，而且中間沒有錯誤發生，該屬性將返回一個ArrayBuffer對象

readAsDataURL(blob) 方法

當調用該方法，用戶代理將會執行如下步驟

1. 若是狀態爲loading，拋出非法狀態錯誤異常，並終止流程。
2. 若是二進制大對象引用處於非可讀狀態（ CLOSED readability state）,在上下文對象上設置錯誤屬性，用來返回 InvalidStateError DOMError，而且觸發一個error事件，在上下文對象中調用錯誤，終止流程。
3. 若是沒事，就將讀取狀態設置爲LOADING。
4. 初始化一個帶註解的讀取任務，將blob參數做爲輸入而且處理在下述file reading task source上的任務隊列
5. 處理讀取錯誤，若是開始讀取就失敗，流程將進入錯誤觸發流程
6. 處理讀取而且觸發loadstart事件
7. 處理讀取到的數據，觸發progress事件

8. 處理讀取到結束符(EOF),執行如下步驟:

   1. 設置readyState爲DONE
   2. 設置result屬性內容爲讀操做的DataURL結果，當訪問該屬性的時候，將二進制對象數據以DataURL形式返回
   3. 觸發load事件
   4. 直到readyState不是loading狀態，觸發loadend事件
9. 結束流程

readAsText(blob, label) 方法

該方法接受一個額外的可選參數label，他是一個字符串，代表讀取成的文檔應該以何種形式編碼，若是提供了該參數，當在調用該方法過程當中，將會以該種編碼形式編碼讀取到的文檔。

當該方法被調用，用戶代理將會執行如下過程：

1. 若是readyState狀態爲loading，拋出非法狀態錯誤異常，並終止流程。
2. 若是二進制大對象引用處於非可讀狀態（ CLOSED readability state）,在上下文對象上設置錯誤屬性，用來返回 InvalidStateError DOMError，而且觸發一個error事件，在上下文對象中調用錯誤，終止流程。
3. 若是沒事，就將讀取狀態設置爲LOADING。
4. 初始化一個帶註解的讀取任務，將blob參數做爲輸入而且處理在下述file reading task source上的任務隊列
5. 處理讀取錯誤，若是開始讀取就失敗，流程將進入錯誤觸發流程
6. 處理讀取而且觸發loadstart事件
7. 處理讀取到的數據，觸發progress事件

8. 處理讀取到結束符(EOF),執行如下步驟:

   1. 設置readyState爲DONE
   2. 設置result屬性內容爲讀操做的結果，當訪問該屬性的時候，將數據以規定編碼形式編碼後返回
   3. 觸發load事件
   4. 直到readyState不是loading狀態，觸發loadend事件
9. 結束流程

readAsArrayBuffer(blob) 方法

當該方法被調用，用戶代理執行如下步驟：

1. 若是readyState狀態爲loading，拋出非法狀態錯誤異常，並終止流程。
2. 若是二進制大對象引用處於非可讀狀態（ CLOSED readability state）,在上下文對象上設置錯誤屬性，用來返回 InvalidStateError DOMError，而且觸發一個error事件，在上下文對象中調用錯誤，終止流程。
3. 若是沒事，就將讀取狀態設置爲LOADING。
4. 初始化一個帶註解的讀取任務，將blob參數做爲輸入而且處理在下述file reading task source上的任務隊列
5. 處理讀取錯誤，若是開始讀取就失敗，流程將進入錯誤觸發流程
6. 處理讀取而且觸發loadstart事件
7. 處理讀取到的數據，觸發progress事件

8. 處理讀取到結束符(EOF),執行如下步驟:

   1. 設置readyState爲DONE
   2. 設置result屬性內容爲讀操做的結果，當訪問該屬性的時候，將數據以ArrayBuffer對象的形式返回
   3. 觸發load事件
   4. 直到readyState不是loading狀態，觸發loadend事件
9. 結束流程

錯誤處理步驟

首先，這些錯誤步驟是用於處理讀取過程當中得到失敗緣由的。

1. 設置上下文中的readyState爲DONE狀態，而後將result置null
2. 設置上下文中的error屬性，當咱們訪問ctx.error的時候，值返回一個DOMError對象，該對象記錄了失敗緣由。觸發error事件。
3. 直到readyState不是loading狀態，觸發loadend事件
4. 流程終止並終止任何正在進行的讀方法

abort() 方法

當調用該方法，用戶代理作如下事情：

1. 若是readyState = EMPTY或者 readyState = DONE, 設置result爲null,終止流程
2. 若是狀態爲LOADING,設置狀態爲DONE，設置result爲null,
3. 若是下述讀取任務在任務隊列中，從隊列中移除這些任務
4. 終止正在執行的讀取方法，終止其處理流程
5. 觸發abort事件
6. 觸發loadend事件

blob參數

FileReader上有三個異步方法，FileReaderSync有三個同步方法，URL對象上有createObjectURL，createFor兩個靜態方法，他們都接受一個叫作blob的參數，這一章節將闡述該參數的定義

blob

這個形式參數是指調用時的一個二進制大對象的實參，而且他必然是一個非底層文件系統拿到的File/Filelist/Blob對象的引用

聲明編碼

當咱們經過readAsText(bolb, label)方法讀取blob對象的時候，必須遵循：

1. 使 encoding 爲 null
2. 若是提供了label參數,設置encoding = label，這個label字符串必須符合現行編碼標準所規定的各類編碼類型
3. 若是"獲取編碼"（2這一步）這一步驟返回失敗，設置encoding爲null
4. 若是encoding爲null,而且blob對象提供了type屬性，而且限定了一個字符集參數（例如 text/plain;charset=UTF-8）,而後該步驟會取此限定參數做爲encoding。
5. 若是上一步失敗，設置encoding = null
6. 若是encoding = null, 設置encoding = 'utf-8'
7. 獲取對blob的編碼結果

事件

FileReader對象就是本身所接受事件的event target。。。由於從第一章節咱們知道這個FileReader API是繼承自 EventTarget的。。。。

當按照規範說明觸發某個進度事件（onload什麼的，event對象的構造函數是ProgressEvent）的時候，將遵循如下內容：

• 進度事件的e，是不會冒泡的e.bubbles = false
• 進度事件的事件對象e是不可取消的 e.cancelable = false
• 術語「觸發一個事件（fire an event）」是在DOM Core規範中定義的。Progress Event是Progress Events規範定義的

const reader = new FileReader();
reader.onload = function (e) {
    console.log(e.target === this) // true
    console.log(this === reader) // true
    console.log(e.bubbles === false) // true
    console.log(e. cancelable === false) // true
    console.log(e.cancelBubble === false) // true
    console.log(console.log(e.constructor.toString())) // function ProgressEvent() { [native code] }
}