File / FileList / FileReader 对象
最后更新于：2022-04-02 03:25:27
[TOC]
## File 对象
**继承Blob 对象**,没有自己的实例方法,但是可以用继承BLob 的`slice()`方法
```
//
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
```
//
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 编码）的字符串，代表文件内容。对于图片文件，这个字符串可以用于`![]()
`元素的`src`属性。注意，这个字符串不能直接进行 Base64 解码，必须把前缀`data:*/*;base64,`从字符串里删除以后，再进行解码。
* FileReader.readAsText()：读取完成后，`result`属性将返回文件内容的文本字符串。该方法的第一个参数是代表文件的 Blob 实例，第二个参数是可选的，表示文本编码，默认为 UTF-8。
demo : 图片预览
```
![]()
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)
}
```
';