[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) } ```