前端培训-中级阶段（20）- 文件API（FileReader）（2019-10-10期）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

最常见的效果有 图片上传预览、类型检查、文件大小检查。

File

File 继承了 Blob ，可以用于任意需要 Blob 类型的方法中，比如FileReader()、URL.createObjectURL()、XMLHttpRequest.send() 这些方法。

File 对象属性

1. lastModified 返回当前 File 对象所引用文件最后修改时间，自 UNIX 时间起始值（1970年1月1日 00:00:00 UTC）以来的毫秒数。
2. name 返回当前 File 对象所引用文件的名字。
3. size 返回文件的大小（单位为字节）。size/1024 为KB,size/1024/1024 为MB。
4. type 返回文件类型如 "image/png"

File 构造函数

file = new File(bits, name[, options]);

1. bits： ArrayBuffer，ArrayBufferView，Blob，Array。是 UTF-8 编码的文件内容。
2. name： 表示文件名称
3. options.type： 表示将要放到文件中的内容的 MIME 类型。默认值为 "" 。
4. options.lastModified： 表示文件最后修改时间的 Unix 时间戳（毫秒）。默认值为 Date.now()。

FileReader

Blob类型的数据，只可以通过FileReader来读取。
读取内容的方法都是异步，如果成功结果会放入result属性中。

读取方法（都是异步）

1. readAsArrayBuffer() 以 ArrayBuffer 表示所读取的文件内容
   可以更方便做计算，比如加密解密
2. readAsBinaryString() 以 原始二进制 表示所读取的文件内容
   很少用
3. readAsDataURL() 以 data: URL格式的 Base64 字符串 表示所读取文件的内容
   常用于图片文件，展示或其他用途
4. readAsText() 以 字符串 表示所读取的文件内容。
   如果是纯文本文件，使用这个即可。

事件回调

1. onabort 读取操作被中断时触发（FileReader.abort()）
2. onerror 读取操作发生错误时触发
3. onload 读取操作完成时触发
   这个时候 filesReader.result 中就有值了
4. onloadstart 读取操作开始时触发
5. onloadend 读取操作结束时（要么成功，要么失败）触发
6. onprogress 进度

Blob

Blob 对象表示一个不可变、原始数据的类文件对象。
Blob 表示的不一定是JavaScript原生格式的数据。
File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

实践一下

表单选择 input

效果传送门
经常用在上传文件中，我们监听input的change事件。
通过files属性来获取（因为input可以通过multiple来选择多个文件）

粘贴

粘贴需要监听 paste 事件，通过获取事件的Event对象e.clipboardData.files来获取所有的文件对象

拖拽

拖拽需要监听drop事件，并阻止默认事件（不阻止会使用浏览器打开），通过获取事件的Event对象e.dataTransfer.files来获取所有的文件对象

总结

1. File 继承了 Blob
2. Blob 只可以使用 FileReader 来读取内容
3. input 使用 e.target.files来获取
4. 粘贴 使用 e.clipboardData.files 来获取
5. 拖拽 使用 e.dataTransfer.files 来获取
6. FileReader 获取内容是异步的，需要监听onload之后拿result

微信公众号：前端linong