HTML5：File API

给大家5秒钟时间，想想这几个需求怎么搞？

• 文件上传时显示进度；
• 图片上传前进行预览；
• 多文件批量上传；
• 拖拽式文件上传；

如果都能给出答案

就不用往下看了

你就是前端扛把子

...继续...

H5 提供了一组简洁有效的文件操作接口：File API

主要涉及：

FileList：用户通过file控件或拖拽选择的一组文件； File：FileList里面放的就是File; Blob：代表一段二进制数据，File就是继承自Blob； FileReader：用于从File、Blob中读取数据； FormData：用Ajax实现上传、进度显示时会用到；

特别注意：

H5 的 File API 虽然可以让我们访问本地文件系统，但只能被动地读取，也就是说只有用户主动触发了文件读取行为（比如通过file控件选择选择文件或拖拽文件），才能访问到File API；

浏览器兼容性（意料之中...IE必然不靠谱...）：

示例1：获取FileList、File

方式1：通过表单file控件获取；

方式2：通过拖拽文件获取；

示例2：用FileReader实现图片预览

FileReader 是一种异步文件读取机制，用于读取File、Blob中的文件数据。

常用接口：

readAsText(Blob|File, opt_encoding)： 用于将 Blob 或 File 对象，按指定的编码（默认UTF-8），转化为字符串形式；

readAsDataURL(Blob|File)： 用于将 Blob 或 File 对象，转换为一个基于base64编码的Data URL对象。（文件上传前预览就是靠这个技术）

示例：多选图片并预览

示例3：文件上传时展示进度

XMLHttpRequest 在 HTML5 规范中引入了几个新特性：

• 上传或者下载中的进度事件（onprogress）；
• 支持上传文件（File、Blob、FormData）；
• 等....

示例：文件上传时展示进度

OK...写完了...终于...