前端培训-中级阶段（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