# File 對象，FileList 對象，FileReader 對象 ## File 對象 File 對象代表一個文件，用來讀寫文件信息。它繼承了 Blob 對象，或者說是一種特殊的 Blob 對象，所有可以使用 Blob 對象的場合都可以使用它。 最常見的使用場合是表單的文件上傳控件（`<input type="file">`），用戶選中文件以后，瀏覽器就會生成一個數組，里面是每一個用戶選中的文件，它們都是 File 實例對象。 ```javascript // HTML 代碼如下 // <input id="fileItem" type="file"> var file = document.getElementById('fileItem').files[0]; file instanceof File // true ``` 上面代碼中，`file`是用戶選中的第一個文件，它是 File 的實例。 ### 構造函數 瀏覽器原生提供一個`File()`構造函數，用來生成 File 實例對象。 ```javascript new File(array, name [, options]) ``` `File()`構造函數接受三個參數。 - array：一個數組，成員可以是二進制對象或字符串，表示文件的內容。 - name：字符串，表示文件名或文件路徑。 - options：配置對象，設置實例的屬性。該參數可選。 第三個參數配置對象，可以設置兩個屬性。 - type：字符串，表示實例對象的 MIME 類型，默認值為空字符串。 - lastModified：時間戳，表示上次修改的時間，默認為`Date.now()`。 下面是一個例子。 ```javascript var file = new File( ['foo'], 'foo.txt', { type: 'text/plain', } ); ``` ### 實例屬性和實例方法 File 對象有以下實例屬性。 - File.lastModified：最后修改時間 - File.name：文件名或文件路徑 - File.size：文件大小（單位字節） - File.type：文件的 MIME 類型 ```javascript var myFile = new File([], 'file.bin', { lastModified: new Date(2018, 1, 1), }); myFile.lastModified // 1517414400000 myFile.name // "file.bin" myFile.size // 0 myFile.type // "" ``` 上面代碼中，由于`myFile`的內容為空，也沒有設置 MIME 類型，所以`size`屬性等于0，`type`屬性等于空字符串。 File 對象沒有自己的實例方法，由于繼承了 Blob 對象，因此可以使用 Blob 的實例方法`slice()`。 ## FileList 對象 `FileList`對象是一個類似數組的對象，代表一組選中的文件，每個成員都是一個 File 實例。它主要出現在兩個場合。 - 文件控件節點（`<input type="file">`）的`files`屬性，返回一個 FileList 實例。 - 拖拉一組文件時，目標區的`DataTransfer.files`屬性，返回一個 FileList 實例。 ```javascript // HTML 代碼如下 // <input id="fileItem" type="file"> var files = document.getElementById('fileItem').files; files instanceof FileList // true ``` 上面代碼中，文件控件的`files`屬性是一個 FileList 實例。 FileList 的實例屬性主要是`length`，表示包含多少個文件。 FileList 的實例方法主要是`item()`，用來返回指定位置的實例。它接受一個整數作為參數，表示位置的序號（從零開始）。但是，由于 FileList 的實例是一個類似數組的對象，可以直接用方括號運算符，即`myFileList[0]`等同于`myFileList.item(0)`，所以一般用不到`item()`方法。 ## FileReader 對象 FileReader 對象用于讀取 File 對象或 Blob 對象所包含的文件內容。 瀏覽器原生提供一個`FileReader`構造函數，用來生成 FileReader 實例。 ```javascript var reader = new FileReader(); ``` FileReader 有以下的實例屬性。 - FileReader.error：讀取文件時產生的錯誤對象 - FileReader.readyState：整數，表示讀取文件時的當前狀態。一共有三種可能的狀態，`0`表示尚未加載任何數據，`1`表示數據正在加載，`2`表示加載完成。 - FileReader.result：讀取完成后的文件內容，有可能是字符串，也可能是一個 ArrayBuffer 實例。 - FileReader.onabort：`abort`事件（用戶終止讀取操作）的監聽函數。 - FileReader.onerror：`error`事件（讀取錯誤）的監聽函數。 - FileReader.onload：`load`事件（讀取操作完成）的監聽函數，通常在這個函數里面使用`result`屬性，拿到文件內容。 - FileReader.onloadstart：`loadstart`事件（讀取操作開始）的監聽函數。 - FileReader.onloadend：`loadend`事件（讀取操作結束）的監聽函數。 - FileReader.onprogress：`progress`事件（讀取操作進行中）的監聽函數。 下面是監聽`load`事件的一個例子。 ```javascript // HTML 代碼如下 // <input type="file" onchange="onChange(event)"> function onChange(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function (event) { console.log(event.target.result) }; reader.readAsText(file); } ``` 上面代碼中，每當文件控件發生變化，就嘗試讀取第一個文件。如果讀取成功（`load`事件發生），就打印出文件內容。 FileReader 有以下實例方法。 - 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。 下面是一個例子。 ```javascript /* HTML 代碼如下 <input type="file" onchange="previewFile()"> <img src="" height="200"> */ function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.addEventListener('load', function () { preview.src = reader.result; }, false); if (file) { reader.readAsDataURL(file); } } ``` 上面代碼中，用戶選中圖片文件以后，腳本會自動讀取文件內容，然后作為一個 Data URL 賦值給`<img>`元素的`src`屬性，從而把圖片展示出來。