html5 文件在线处理,HTML 5中的文件处理之FileAPI

末蓝、 2022-10-06 00:45 149阅读 0赞

在众多HTML5规范中，有一部分规范是跟文件处理有关的，在早期的浏览器技术中，处理小量字符串是js最擅长的处理之一。但文件处理，尤其是二进制文件处理，一直是个空白。在一些情况下，我们不得不通过Flash/ActiveX/NP插件或云端的服务器处理较为复杂或底层的数据。今天，HTML5的一系列新规范正在致力于让浏览器具备更强大的文件处理能力。

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

总览

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

◆ FileList接口: 可以用来代表一组文件的JS对象，比如用户通过input\[type="file"\]元素选中的本地文件列表

◆ Blob接口: 用来代表一段二进制数据，并且允许我们通过JS对其数据以字节为单位进行“切割”

◆ File接口: 用来代步一个文件，是从Blob接口继承而来的，并在此基础上增加了诸如文件名、MIME类型之类的特性

◆ FileReader接口: 提供读取文件的方法和事件

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

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

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

接口描述

这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控件，读取其中的第二个文件，并将其文本内容在控制台输出

varinput=document.querySelector('input\[type="file"\]'); // 找到\*\*\*个file控件

varfirstFile=input.files\[0\]; // file控件的files特性其实就是一个FileList类型的对象

varsecondFile=input.files\[1\]; // 当file控件的multiple特性为true时，我们可以同时选择多个文件，通过input.files\[n\]可以按序访问这些文件

varreader=newFileReader(); // 新建一个FileReader类型的对象

reader.readAsText(secondFile); // 按文本格式读取file控件中的第二个文件

reader.onloadend=function(e) \{ // 绑定读取操作完成的事件

console.log(reader.result); // 取得读取结果并输出

\};

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

varsize=file.size; // 先取得文件总字节数

varresult=file.slice(3, size - 3); // 用slice方法去掉开头的3个字节

\*\*\*，对FileAPI实践的三点注意

1. 由于规范尚未截稿，\#File.urn尚存较大变数，webkit并未实现此特性

2. \#Blob.slice在webkit内核中加入了前缀，即\#Blob.webkitSlice，且第二个参数不是“length”，而是“end”，话句话说，上面的示例二应改为file.webkitSlice(3, size)才能生效

3. 规范中还明确规定了各种出错处理和异常处理，这些内容是同样重要的：不论对于一套完备的规范，还是对于一个健壮的程序而言。由于篇幅有限，这部分就不细说了，大家可以在W3C官网自由查阅

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

原文：http://bulaoge.net/topic.blg?dmn=g3g4&tid=2344378\#Content

【编辑推荐】

【责任编辑：陈贻新 TEL：(010)68476606】

点赞 0

发表评论取消回复

表情：

评论列表（有 0 条评论，149人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 文件上传

HTML5 文件上传另参考 http://www.jianshu.com/p/46e6e03a0d53 1 filelist对象与file对象： 1 <inpu

怼烎@/ 2023年08月17日 16:20/ 0 赞/ 137 阅读

相关兼容input 文件选择_「HTML5」FileAPI 文件操作实战

> 本文来自《FileAPI 文件操作实战》 > 其他系列放在了Github，欢迎交流和Star 介绍 HTML5 为我们提供了 File API 相关规范。主要

深藏阁楼爱情的钟/ 2022年11月19日 11:20/ 0 赞/ 170 阅读

相关 html5 图片清晰化处理,HTML5中的picture元素响应式处理图片方法

![5268f80b9b1e01f982625ef6fac83ca1.png][] 所谓的响应式设计，是指在不同的屏幕分辨率，不同的像素密度比，不同宽度的终端设备中，网页布局

电玩女神/ 2022年10月06日 08:58/ 0 赞/ 219 阅读

相关 html5中二进制数据处理,HTML5新特性之文件和二进制数据的操作

历史上，JavaScript无法处理二进制数据。如果一定要处理的话，只能使用charCodeAt()方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成B

悠悠/ 2022年10月06日 07:55/ 0 赞/ 174 阅读

相关 html5 文件在线处理,HTML 5中的文件处理之FileAPI

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

末蓝、/ 2022年10月06日 00:45/ 0 赞/ 150 阅读

相关 HTML5 中的文件（File）操作

HTML5中丰富了input 标签type为file的操作。提供了一个multiple属性。以及提供了在浏览器中操作file的接口。 type:上传文件的mime属性

柔情只为你懂/ 2022年08月27日 03:57/ 0 赞/ 189 阅读

相关 HTML5 文件API

1.FileList对象和file对象 FileList对象表示用户选择的文件列表。在HTML5中，通过multiple属性，file控件内允许一次放置多个文件。控件内的每

向右看齐/ 2022年07月13日 02:18/ 0 赞/ 201 阅读

相关【HTML5】——音视频处理

<table> <tbody> <tr> <td><b>目录</b></td> </tr> </tbody> </table> 1.视频处理

朴灿烈づ我的快乐病毒、/ 2022年06月07日 03:29/ 0 赞/ 259 阅读

相关 html5 canvas 图像处理

1.图像放大缩小 <script> var cvs = document.getElementById("canvas");

左手的ㄟ右手/ 2021年12月22日 10:39/ 0 赞/ 369 阅读

相关 html5之文件和二进制的操作

历史上，JavaScript无法处理二进制数据。如果一定要处理的话，只能使用charCodeAt()方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成B

素颜马尾好姑娘i/ 2021年06月24日 14:34/ 0 赞/ 492 阅读