「前端知乎系列」File FileList 和 FileReader 對象詳解

更多豐富的前端學習資料，可以查看我的 Github: 《Leo-JavaScript》(https://github.com/pingan8787/Leo-JavaScript)，內容涵蓋數據結構與算法、HTTP、Hybrid、面試題、React、Angular、TypeScript和Webpack等等。

點個 Star 不迷路~

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

那麼本文將與大家深入介紹兩者。

一、File 對象

1. 概念介紹

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

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

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

<code>// HTML 代碼如下
//  

const file = document.getElementById('fileItem').files[0];
file instanceof File // true
/<code>

2. 對象使用

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

<code>const myFile = new File(bits, name[, options]);
/<code>

參數：

• bits：

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

通過這個參數，也可以實現 ArrayBuffer，ArrayBufferView，Blob 轉換為 File 對象。

• name：

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

• options：

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

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

示例：

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

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

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

3. 實例屬性和方法

3.1 實例屬性

實例有以下幾個屬性：

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

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

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

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

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

<code>// HTML 代碼如下
// 
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);
});
/<code>

3.2 實例方法

File 對象沒有定義任何方法，但是它從 Blob 接口繼承了以下方法：

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

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

4. 兼容性

File對象兼容性.png

二、FileList 對象

1. 概念介紹

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

• 通過 控件的 files 屬性，返回一個 FileList 實例。

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

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

<code>// HTML 代碼如下
// 
const files = document.getElementById('fileItem').files;
files instanceof FileList // true

const firstFile = files[0];
/<code>

2. 對象使用

所有 type 屬性為 file 的 元素都有一個 files 屬性，用來存儲用戶所選擇的文件. 例如:

3. 實例屬性和方法

3.1 實例屬性

實例只有一個屬性：

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

3.2 實例方法

實例只有一個方法：

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

由於 FileList 實例是個類數組對象，可以直接用方括號運算符，即myFileList[0] 等同於 myFileList.item(0) ，所以一般用不到 item()方法。

4. 兼容性

FileList對象兼容性.png

5. 實例

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

<code>// HTML 代碼如下
// 
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++;
    }    
});
/<code>

三、FileReader 對象

1. 概念介紹

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

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

2. 對象使用

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

<code>const reader = new FileReader(); 

/<code>

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 編碼）的字符串，代表文件內容。

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

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

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

4. 兼容性

FileReader對象兼容性.png

5. 實例

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

<code>/* HTML 代碼如下
  
  
*/

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);
  }
}
/<code>

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

閱讀更多 前端自習課 的文章

關鍵字: UNIX TypeScript 算法