简介
HTML 5中File API是HTML 5中一大亮点,可以让我们去读取本地文件,通过File API规范提供了多种访问文件接口。
API 被分为以下不同的主题:
-
读取和处理文件:
File
/Blob
、FileList
、FileReader
-
创建和写入:
BlobBuilder
、FileWriter
-
目录和文件系统访问:
DirectoryReader
、FileEntry
/DirectoryEntry
、LocalFileSystem
◆ FileList接口: 可以用来代表一组文件的JS对象,比如用户通过input[type="file"]元素选中的本地文件列表
◆ Blob接口: 用来代表一段二进制数据,并且允许我们通过JS对其数据以字节为单位进行“切割”
◆ File接口: 用来代步一个文件,是从Blob接口继承而来的,并在此基础上增加了诸如文件名、MIME类型之类的特性
◆ FileReader接口: 提供读取文件的方法和事件
这里有两点细节需要注意:
1. 我们平时使用input[type="file"]元素都是选中单个文件,其本身是允许同时选中多个文件的,所以会用到FileList
2. Blob接口和File接口可以返回数据的字节数等信息,也可以“切割”,但无法获取真正的内容,这也正是FileReader存在的意义,而文件大小不一时,读取文件可能存在明显的时间花费,所以我们用异步的方式,通过触发另外的事件来返回读取到的文件内容
浏览器对HTML 5中File相关接口的支持情况
在使用File API时,可能需要检测浏览器的支持情况,特征检测代码如下:
- // 检测浏览器是否支持File API相关接口.
- if (window.File && window.FileReader && window.FileList && window.Blob) {
- //支持滴
- } else {
- //不支持
- alert('HTML5 File API在您的浏览器里是不完全支持的。');
- }
浏览器中File API并不能想读取文件就可以读取文件的,你必须通过用户的行为才能触发文件的读取。比如,进入网页,当用户执行点击操作后,选择文件后,通过File API就可以获取文件的相关信息。支持File API的浏览器有IE10+、FireFox 3.5+、Opera 10.6+、Safari 5+、Chrome和IOS版的Safari及Android版的Webkit、UC ;当然,它们多数并不是完全支持的。