【前端知乎】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); } }
四、參考資料
- 《File 對象，FileList 對象，FileReader 對象》
- MDN
