[TOC] ## File 對象 **繼承Blob 對象**,沒有自己的實例方法,但是可以用繼承BLob 的`slice()`方法 ``` // <input id="fileItem" type="file"> var file = document.getElementById('fileItem').files[0]; file instanceof File // true ``` 構造函數 ``` new File(array, name [, options]) array：一個數組，成員可以是二進制對象或字符串，表示文件的內容。 name：字符串，表示文件名或文件路徑。 options：該參數可選。 type：字符串，表示實例對象的 MIME 類型，默認值為空字符串。 lastModified：時間戳，表示上次修改的時間，默認為Date.now()。 ``` 實例 ``` var file = new File( ['foo'], 'foo.txt', { type: 'text/plain', } ); ``` 屬性 * File.lastModified：最后修改時間 * File.name：文件名或文件路徑 * File.size：文件大小（單位字節） * File.type：文件的 MIME 類型 ## FileList 對象 FileList對象是一個類似數組的對象,每個成員都是一個 File 實例 ``` var files = document.getElementById('fileItem').files; files instanceof FileList // true ``` 屬性 - length 獲取數組長度 方法 - item `myFileList[0]`等同于`myFileList.item(0)` ## FileReader 對象 - FileReader 對象用于讀取 File 對象或 Blob 對象所包含的文件內容 - 一般使用 `FileReader`方法 如 `readAsDataURL()`參數為`this.files[0]`input的屬性的文件,在通過`result` 返回獲取到的值 ### 屬性 * 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`事件（讀取操作進行中）的監聽函數。 demo: 監聽 onload ``` // <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); } ``` ### 方法 * 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。 demo : 圖片預覽 ``` <input type="file" onchange="previewFile(this.files[0])"> <img src="" height="200"> function previewFile(f) { var img = document.querySelector('img'); var reader = new FileReader; if (f){ reader.readAsDataURL(f) }else{ console.error('no file') } reader.addEventListener('load',function () { img.src = reader.result },false) } ```