HTML5 中的文件处理之 File API

发布于 2019-01-10 字数4755 浏览 831 评论 0

在众多 HTML5 规范中,有一部分规范是跟文件处理有关的,在早期的浏览器技术中,处理小量字符串是 JavaScriot 最擅长的处理之一。但文件处理,尤其是二进制文件处理,一直是个空白。

你不得不知关于HTML5中File API的秘密

在一些情况下,我们不得不通过 Flash/ActiveX/NP 插件或云端的服务器处理较为复杂或底层的数据。今天 HTML5 的一系列新规范正在致力于让浏览器具备更强大的文件处理能力。

今天要介绍的 FileAPI,就是为解决这类问题而生的。

FileAPI 介绍

FileAPI 是一些列文件处理规范的基础,包含最基础的文件操作的 JavaScript 接口设计。其中最主要的接口定义一共有 4 个:

  • FileList 可以用来代表一组文件的 JS 对象,比如用户通过 input[type="file"] 元素选中的本地文件列表
  • Blob 用来代表一段二进制数据,并且允许我们通过 JS 对其数据以字节为单位进行“切割”
  • File 用来代步一个文件,是从 Blob 接口继承而来的,并在此基础上增加了诸如文件名、MIME 类型之类的特性
  • FileReader 提供读取文件的方法和事件

这里有两点细节需要注意:

1. 我们平时使用 input[type="file"] 元素都是选中单个文件,其本身是允许同时选中多个文件的,所以会用到 FileList

2. Blob 接口和 File 接口可以返回数据的字节数等信息,也可以“切割”,但无法获取真正的内容,这也正是 FileReader 存在的意义,而文件大小不一时,读取文件可能存在明显的时间花费,所以我们用异步的方式,通过触发另外的事件来返回读取到的文件内容

FileAPI 接口介绍

这 4 个接口其实并不复杂,也很好理解,接口中的 #Foo 表示任意 Foo 类型的对象):

FileList 接口

#FileList[index] // 得到第index个文件

Blob 接口

#Blob.size // 只读特性,数据的字节数
#Blob.slice(start, length) // 将当前文件切割并将结果返回

File 接口

#File.size // 继承自Blob,意义同上
#File.slice(start, length) // 继承自Blob,意义同上
#File.name // 只读属性,文件名
#File.type // 只读属性,文件的MIME类型
#File.urn // 只读属性,代表该文件的URN,几乎用不到,暂且无视

FileReader 方法

#FileReader.readAsBinaryString(blob/file) // 以二进制格式读取文件内容
#FileReader.readAsText(file, [encoding]) // 以文本(及字符串)格式读取文件内容,并且可以强制选择文件编码
#FileReader.readAsDataURL(file) // 以DataURL格式读取文件内容
#FileReader.abort() // 终止读取操作

FileReader 事件

#FileReader.onloadstart // 读取操作开始时触发
#FileReader.onload // 读取操作成功时触发
#FileReader.onloadend // 读取操作完成时触发(不论成功还是失败)
#FileReader.onprogress // 读取操作过程中触发
#FileReader.onabort // 读取操作被中断时触发
#FileReader.onerror // 读取操作失败时触发

FileReader 属性

#FileReader.result // 读取的结果(二进制、文本或DataURL格式)
#FileReader.readyState // 读取操作的状态(EMPTY、LOADING、DONE)

代码示例

举例一控制 File 控件,读取其中的第二个文件,并将其文本内容在控制台输出

var input = document.querySelector('input[type="file"]'); // 找到第一个file控件
var firstFile = input.files[0]; // file控件的files特性其实就是一个FileList类型的对象
var secondFile = input.files[1]; // 当file控件的multiple特性为true时,我们可以同时选择多个文件,通过input.files[n]可以按序访问这些文件
var reader = new FileReader(); // 新建一个FileReader类型的对象
reader.readAsText(secondFile); // 按文本格式读取file控件中的第二个文件
reader.onloadend = function (e) { // 绑定读取操作完成的事件
    console.log(reader.result); // 取得读取结果并输出
};

举例二给一个含 utf-8 编码的文本文件去掉 BOM 头信息

var size = file.size; // 先取得文件总字节数
var result = file.slice(3, size - 3); // 用slice方法去掉开头的3个字节

最后对 File API 实践的三点注意

  1. 由于规范尚未截稿,#File.urn 尚存较大变数,Webkit 内核的浏览器并未完全实现此特性
  2. #Blob.slice 在 Webkit 内核中加入了前缀,即 #Blob.webkitSlice,且第二个参数不是 length,而是 end,换句话说,上面的示例二应改为 file.webkitSlice(3, size) 才能生效
  3. 规范中还明确规定了各种出错处理和异常处理,这些内容是同样重要的:不论对于一套完备的规范,还是对于一个健壮的程序而言。由于篇幅有限,这部分就不细说了,大家可以在 W3C 官网自由查阅

以上就是 FileAPI 的简单介绍。万丈高楼平地起,后面的文件操作会更神奇更有趣。

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

上一篇:

没有了,已经是最新文章

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!