input类型为 file 的相关知识点总结和使用

input类型为 file 的相关知识点

type为file的是文件上传的类型。使用户可以选择一个或多个元素以提交表单的方式上传到服务器上。

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" multiple required>

1.常用的三个属性

• accept 属性接受一个逗号分隔的 MIME 类型字符串，如：accept=“image/png, image/jpeg” or accept=".png, .jpg, .jpeg"
• multiple（html5的属性）：这个属性指示用户能否输入多个值。这个属性仅在type属性为email或file的时候生效 ; 否则被忽视。（兼容性 >ie9 2019年3月25日）
• required（html5的属性）： 指定用户在提交表单之前必须为该元素填充值.（兼容性 >ie9 2019年3月25日）

2.FileList对象

通过 获取dom元素来获得。如下：

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" multiple required>
// 获取dom 对象
let file = document.getElementById("avatar");
// FileList 对象如下：
let fileList = file.files;  // 表示 fileList 对象集合

FileList 包含 File 对象。
File对象的值包含如下：（只读）

• name：文件名
• lastModified：UNIX timestamp 形式的最后修改时间
• lastModifiedDate： Date 形式的最后修改时间
• size：文件的字节大小
• type：文件的MIME类型

3.Blob对象

定义：表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。
生成 Blob 对象有两种方法：一种是使用 Blob 构造函数，另一种是对现有的 Blob 对象使用 slice 方法切出一部分。
如下：

//1. 构造函数
new Blob(blobParts[, options])

//2. slice方法
Blob.slice([start,[ end ,[contentType]]])

4.FileReader 对象（兼容 ie10 以上）

定义： 允许程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据（为参数）。

let reader = new FileReader();

属性有：

• error: 表示读取文件发生的错误。
• readyState: 表示状态的数字。 EMPTY(0)：未加载。 LOADING(1)：正在加载。 DONE(2)：加载完成。
• result: 文件的内容。 该属性仅在读取操作完成后才有效

事件处理（继承自EventTarget）:

• onabort：该事件在读取操作被中断时触发。
• onerror：该事件在读取操作发生错误时触发。
• onload： 该事件在读取操作完成时触发。
• onloadstart：该事件在读取操作开始时触发。
• onloadend：该事件在读取操作结束时 （要么成功，要么失败）触发。
• onprogress： 该事件在读取Blob时触发。

方法：

• abort()：中止读取操作。在返回时，readyState属性为