File 对象
File构造函数
我们接触的多数关于 File 的操作都是读取，js也为我们提供了手动创建 File 对象的构造函数：File(bits, name[, options])。
bits (required) ArrayBuffer，ArrayBufferView，Blob，或者 Array[string] — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。。* name [String] (required) 文件名称，或者文件路径.* options [Object] (optional) 选项对象，包含文件的可选属性。可用的选项如下：* type: string, 表示将要放到文件中的内容的MIME类型。默认值为 '' 。* lastModified: 数值，表示文件最后修改时间的 Unix 时间戳（毫秒）。默认值为 Date.now()。
示例：
var file1 = new File(['text1', 'text2'], 'test.txt', {type: 'text/plain'});
根据已有的 blob 对象创建 File 对象:
var file2 = new File([blob], 'test.png', {type: 'image/png'});
File实例属性
File 对象的实例内容不可见，但是有以下属性可以访问:
| 属性名称 | 读/写 | 描述 |
|---|---|---|
| name | 只读 | 返回文件的名称.由于安全原因,返回的值并不包含文件路径 。 |
| type | 只读 | 返回 File 对象所表示文件的媒体类型（MIME）。例如 PNG 图像是 "image/png". |
| lastModified | 只读 | number, 返回所引用文件最后修改日期,自 1970年1月1日0:00 以来的毫秒数。 |
| lastModifiedDate | 只读 | Date, 返回当前文件的最后修改日期,如果无法获取到文件的最后修改日期,则使用当前日期来替代。 |
<input type="file" id='file'>
document.getElementById('file').addEventListener('change',
function(event){
const file = this.files[0];
if (file){
console.log(file.name);
console.log(file.size);
console.log(file.lastModified);
console.log(file.lastModifiedDate);}
});
File实例方法
slice([start[, end[, contentType]]])
File 对象没有定义额外的方法，由于继承了 Blob 对象，也就继承了 slice方法，用法同 Blob 的 slice 方法。
FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。
FileReader 对象
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，
使用 File 或 Blob 对象指定要读取的文件或数据。
其中 File 对象可以是来自用户在一个 input 元素上选择文件后返回的 FileList, 也可以来自拖放操作生成的 DataTransfer 对象,还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile() 方法后返回结果。
FileReader构造函数
var reader = new FileReader()
构造函数不需要传入参数，返回一个 FileReader 的实例。FileReader 继承 EventTarget对象。
FileReader实例属性
| 属性名称 | 读/写 | 描述 |
|---|---|---|
| error | 只读 | DOMException 的实例，表示在读取文件时发生的错误 。 |
| result | 只读 | 文件的内容，该属性仅在读取操作完成后(load)后才有效，格式取决于读取方法 |
| readyState | 只读 | 表示读取文件时状态的数字 |
readeyState的取值如下:
| 值 | 常量名 | 描述 |
|---|---|---|
| 0 | EMPTY | 还没有加载任何数据 |
| 1 | LOADING | 数据正在被加载 |
| 2 | DONE | 已完成全部的读取请求. |
使用示例：
var reader = new FileReader();
console.log(reader.error); // null
console.log(reader.result);// null
console.log(reader.readyState);// 0
console.log(reader.EMPTY); // 0
console.log(reader.LOADING); // 1
console.log(reader.DONE);// 2
EMPTY、LOADING、DONE 这三个属性同时存在于 FileReader 和它的的原型对象上，因此实例上有这三个属性，FileReader 对象本身也有这三个属性:
console.log(FileReader.EMPTY); // 0
console.log(FileReader.LOADING); // 1
console.log(FileReader.DONE);// 2
FileReader事件
文件的读取是一个异步的过程，和 XMLHttpRequest 对象一样，在读取操作过程中会触发一系列事件。
| 事件名称 | 描述 | 使用示例 |
|---|---|---|
| abort | 读取操作被中断时触发。 | reader.onabort = function(event) {} |
| error | 在读取操作发生错误时触发。 r | eader.onerror = function(event) {} |
| load | 读取操作完成时触发。 | reader.addEventListener('load', function(event) {}) |
| loadstart | 读取操作开始时触发。 | reader.onloadstart = function(event) {} |
| loadend | 读取操作结束时（要么成功，要么失败）触发。 | reader.onloadend = function(event) {} |
| progress | 在读取Blob时触发。 | reader.onprogress = function(event) {} |
FileReader实例方法
FileReader 的实例具有以下可操作的方法:
| 方法名称 | 描述 | 使用示例 |
|---|---|---|
| abort() | 手动终止读取操作，只有当 readyState 为 1 时才能调用，调用后，readyState 值为 2 | reader.abort() |
| readAsArrayBuffer(blob) | 读取指定的 Blob 或 File 对象。读取操作完成后(触发loadend事件)，result属性将包含一个 ArrayBuffer 对象表示所读取的文件的数据。 | reader.readAsArrayBuffer(blob) |
| readAsDataURL(blob) | 读取指定的 Blob 或 File 对象。读取操作完成后(触发loadend事件)，result属性将包含一个 data:URL 格式的字符串(base64编码) | reader.readAsArrayBuffer(file) |
| readAsBinaryString(blob) | 已废弃，用 readAsArrayBuffer 代替-- | |
| readAsText(blob[, encoding]) | 将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式), 默认编码是 utf-8 | reader.readAsArrayBuffer(blob) |
读取本地图片示例:
<input type="file" id='file' accept="image/png, image/jpg, image/jpeg, image/gif" />><br />>
<img src="" alt="Image preview...">
var preview = document.querySelector('img');
var reader= new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
document.getElementById('file').addEventListener('change', function (event) {
var file = this.files[0];
if (file) {
reader.readAsDataURL(file);
}
});
