HTML5 中的文件处理之 File API - 文章教程

HTML5 中的文件处理之 File API

发布于 2019-01-10 字数 4757 浏览 1659 评论 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 的简单介绍。万丈高楼平地起,后面的文件操作会更神奇更有趣。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

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

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0