HTML5 文件操作API

简介

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 ；当然，它们多数并不是完全支持的。