【前端知乎系列】File FileList 和 FileReader 對象詳解

本文首發在個人【我的博客】
更多豐富的前端學習資料，能夠查看個人 Github: 《Leo-JavaScript》，內容涵蓋數據結構與算法、HTTP、Hybrid、面試題、React、Angular、TypeScript和Webpack等等。 點個 Star 不迷路~

歡迎閱讀《前端知乎系列》：

• 《【前端知乎】443- ArrayBuffer 與 Blob 對象詳解》

File 對象、FileList 對象與 FileReader 對象你們或許不太陌生，常見於文件上傳下載操做處理（如處理圖片上傳預覽，讀取文件內容，監控文件上傳進度等問題）。

那麼本文將與你們深刻介紹二者。

1、File 對象

1. 概念介紹

File 對象提供有關文件的信息，並容許網頁中的 JavaScript 讀寫文件。

最多見的使用場合是表單的文件上傳控件，用戶在一個 <input type="file"> 元素上選擇文件後，瀏覽器會生成一個數組，裏面是每個用戶選中的文件，它們都是 File 實例對象。

另外值得提到一點：File 對象是一種特殊 Blob 對象，而且能夠用在任意的 Blob 對象的 context 中。好比說， FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能處理 Blob 和 File。

// HTML 代碼以下
// <input id="fileItem" type="file">
const file = document.getElementById('fileItem').files[0];
file instanceof File // true

2. 對象使用

瀏覽器原生提供一個 File() 構造函數，用來生成 File 實例對象。

const myFile = new File(bits, name[, options]);

參數：

• bits：

一個數組，表示文件的內容。成員能夠是 ArrayBuffer，ArrayBufferView，Blob，或者 DOMString 對象的 Array，或者任何這些對象的組合。

經過這個參數，也能夠實現 ArrayBuffer，ArrayBufferView，Blob 轉換爲 File 對象。

• name：

字符串，表示文件名或文件路徑。

• options：

配置對象，設置實例的屬性。該參數可選。可選值有以下兩種：

type: DOMString，表示將要放到文件中的內容的 MIME 類型。默認值爲 "" 。 lastModified: 數值，表示文件最後修改時間的 Unix 時間戳（毫秒）。默認值爲 Date.now()。

示例：

const myFile = new File(['leo1', 'leo2'], 'leo.txt', {type: 'text/plain'});

根據已有的 blob 對象建立 File 對象:

const myFile = new File([blob], 'leo.png', {type: 'image/png'});

3. 實例屬性和方法

3.1 實例屬性

實例有如下幾個屬性：

• File.lastModified：最後修改時間。只讀

自 UNIX 時間起始值（1970年1月1日 00:00:00 UTC）以來的毫秒數

• File.name：文件名或文件路徑。只讀

出於安全考慮，返回值不包含文件路徑 。

• File.size：文件大小（單位字節）。只讀
• File.type：文件的 MIME 類型。只讀

// HTML 代碼以下
// <input id="fileItem" type="file">
const myFile = document.getElementById('fileItem')
myFile.addEventListener('change', function(e){
    const file = this.files[0];
    console.log(file.name);
    console.log(file.size);
    console.log(file.lastModified);
    console.log(file.lastModifiedDate);
});

3.2 實例方法

File 對象沒有定義任何方法，可是它從 Blob 接口繼承瞭如下方法：

• Blob.slice([start[, end[, contentType]]])

返回一個新的 Blob 對象，它包含有源 Blob 對象中指定範圍內的數據。

4. 兼容性

2、FileList 對象

1. 概念介紹

FileList 對象是一個類數組對象，每一個成員都是一個 File 實例，主要出如今兩種場合：

• 經過 <input type="file"> 控件的 files 屬性，返回一個 FileList 實例。

另外，當 input 元素擁有 multiple 屬性，則能夠用它來選擇多個文件。

• 經過拖放文件，查看 DataTransfer.files 屬性，返回一個 FileList 實例。

// HTML 代碼以下
// <input id="fileItem" type="file">
const files = document.getElementById('fileItem').files;
files instanceof FileList // true

const firstFile = files[0];

2. 對象使用

全部 type 屬性爲 file 的 <input> 元素都有一個 files 屬性，用來存儲用戶所選擇的文件. 例如:

3. 實例屬性和方法

3.1 實例屬性

實例只有一個屬性：

• FileList.length：返回列表中的文件數量。只讀

3.2 實例方法

實例只有一個方法：

• FileList.item()：用來返回指定位置的實例，從 0 開始。

因爲 FileList 實例是個類數組對象，能夠直接用方括號運算符，即 myFileList[0] 等同於 myFileList.item(0) ，因此通常用不到 item() 方法。

4. 兼容性

5. 實例

選擇多個文件，並獲取每一個文件信息：

// HTML 代碼以下
// <input id="myfiles" multiple type="file">
const myFile = document.querySelector("#myfiles");
myFile.addEventListener('change', function(e){
    let files = this.files;
    let fileLength = files.length;
    let i = 0;
    while ( i < fileLength) {
        let file = files[i];
        console.log(file.name);
        i++;
    }    
});

3、FileReader 對象

1. 概念介紹

FileReader 對象容許 Web 應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。

簡單理解，就是用於讀取 File 對象或 Blob 對象所包含的文件內容。

2. 對象使用

瀏覽器原生提供一個 FileReader 構造函數，用來生成 FileReader 實例。

const reader = new FileReader();

3. 實例屬性和方法

FileReader 對象擁有的屬性和方法較多。

3.1 實例屬性

• FileReader.error : 表示在讀取文件時發生的錯誤。只讀
• FileReader.readyState : 整數，表示讀取文件時的當前狀態。只讀

共有三種狀態：
0 : EMPTY，表示還沒有加載任何數據； 1 : LOADING，表示數據正在加載； 2 : DONE，表示加載完成；

• FileReader.result 讀取完成後的文件內容。只讀

僅在讀取操做完成後纔有效，返回的數據格式取決於使用哪一個方法來啓動讀取操做。

3.2 事件處理

• FileReader.onabort : 處理abort事件。該事件在讀取操做被中斷時觸發。
• FileReader.onerror : 處理error事件。該事件在讀取操做發生錯誤時觸發。
• FileReader.onload : 處理load事件。該事件在讀取操做完成時觸發。
• FileReader.onloadstart : 處理loadstart事件。該事件在讀取操做開始時觸發。
• FileReader.onloadend : 處理loadend事件。該事件在讀取操做結束時（要麼成功，要麼失敗）觸發。
• FileReader.onprogress : 處理progress事件。該事件在讀取Blob時觸發。

3.3 實例方法

• FileReader.abort()：終止讀取操做，readyState 屬性將變成2。
• FileReader.readAsArrayBuffer()：以 ArrayBuffer 的格式讀取文件，讀取完成後 result 屬性將返回一個 ArrayBuffer 實例。
• FileReader.readAsBinaryString()：讀取完成後， result 屬性將返回原始的二進制字符串。
• FileReader.readAsDataURL()：讀取完成後， result 屬性將返回一個 Data URL 格式（Base64 編碼）的字符串，表明文件內容。

對於圖片文件，這個字符串能夠用於<img>元素的 src 屬性。注意，這個字符串不能直接進行 Base64 解碼，必須把前綴 data:*/*;base64 ,從字符串裏刪除之後，再進行解碼。

• FileReader.readAsText()：讀取完成後， result 屬性將返回文件內容的文本字符串。

該方法的第一個參數是表明文件的 Blob 實例，第二個參數是可選的，表示文本編碼，默認爲 UTF-8。

4. 兼容性

5. 實例

這裏舉一個圖片預覽的實例：

/* HTML 代碼以下
  <input type="file" onchange="previewFile()">
  <img src="" height="200">
*/

function previewFile() {
  let preview = document.querySelector('img');
  let file    = document.querySelector('input[type=file]').files[0];
  let reader  = new FileReader();

  reader.addEventListener('load', function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

4、參考資料

1. 《File 對象，FileList 對象，FileReader 對象》
2. MDN

5、關於我

本文首發在 pingan8787我的博客，如需轉載請保留我的介紹。

Author	王平安
E-mail	pingan8787@qq.com
博 客	www.pingan8787.com
微 信	pingan8787
每日文章推薦	https://github.com/pingan8787/Leo_Reading/issues
ES小冊	js.pingan8787.com