HTML5中的文件处理 之 File API
source link: https://jiongks.name/blog/2012-02-22
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
HTML5中的文件处理 之 File API
本文摘自 勾三股四 更早时期的 不老歌 博客。
在众多HTML5规范中，有一部分规范是跟文件处理有关的，在早期的浏览器技术中，处理小量字符串是js最擅长的处理之一。但文件处理，尤其是二进制文件处理，一直是个空白。在一些情况下，我们不得不通过Flash/ActiveX/NP插件或云端的服务器处理较为复杂或底层的数据。今天，HTML5的一系列新规范正在致力于让浏览器具备更强大的文件处理能力。
今天要介绍的FileAPI，就是为解决这类问题而生的。
总览
FileAPI是一些列文件处理规范的基础，包含最基础的文件操作的JavaScript接口设计。其中最主要的接口定义一共有4个：
* FileList接口: 可以用来代表一组文件的JS对象，比如用户通过input[type="file"]元素选中的本地文件列表
* Blob接口: 用来代表一段二进制数据，并且允许我们通过JS对其数据以字节为单位进行“切割”
* File接口: 用来代步一个文件，是从Blob接口继承而来的，并在此基础上增加了诸如文件名、MIME类型之类的特性
* FileReader接口: 提供读取文件的方法和事件
这里有两点细节需要注意：
1. 我们平时使用input[type="file"]元素都是选中单个文件，其本身是允许同时选中多个文件的，所以会用到FileList
2. Blob接口和File接口可以返回数据的字节数等信息，也可以“切割”，但无法获取真正的内容，这也正是FileReader存在的意义，而文件大小不一时，读取文件可能存在明显的时间花费，所以我们用异步的方式，通过触发另外的事件来返回读取到的文件内容
接口描述
这4个接口其实并不复杂，也很好理解(接口中的“#Foo”表示任意Foo类型的对象)：FileList接口
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK