【前端知乎】445- File FileList 和 FileReader 對象詳解

  • 2019 年 12 月 24 日
  • 筆記

本文首發在我的【個人部落格】www.pingan8787.com 更多豐富的前端學習資料，可以查看我的 Github: 《Leo-JavaScript》https://github.com/pingan8787/Leo-JavaScript，內容涵蓋數據結構與演算法、HTTP、Hybrid、面試題、React、Angular、TypeScript和Webpack等等。

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

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

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

一、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. 兼容性

File對象兼容性.png

二、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. 兼容性

FileList對象兼容性.png

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++;      }  });

三、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. 兼容性

FileReader對象兼容性.png

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

四、參考資料

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

Tags:

VirMach 便宜 VPS