Lidong's blog

HTML5 中的文件 API

欢迎访问新站点: https://www.yidiankuaile.com/post/web-file-api

文件 API

HTML5 提供了关于文件操作的文件 API。

  1. 代表原始二进制数据的 Blob 对象

  2. 存放原始二进制数据的缓存区的 ArrayBuffer 对象,以及可向缓存区写入或从缓存区中读出数据的 ArrayBufferView 对象与 DataView 对象。

See the Pen FileList by oonnnoo (@oonnnoo) on CodePen.

ArrayBuffer 与 ArrayBufferView 及 DataView

// TODO

Blob 对象

创建 Blob 对象

1
var blob = new Blob([blobParts, type]);

第一个参数值为一个数组,可以存放任意数量的以下类型的对象。

  • Array Buffer
  • ArrayBufferView
  • Blob
  • String 对象

第二个参数表示为数据类型

1
2
3
4
5
6
7
8
var blob = new Blob(["1234" + "5678"]);
var blobX = new Blob(["1234" + "5678"], { type: "text/plain" });
var blobY = new Blob(["1234" + "5678"], { type: "text/plain;charset=UTF-8" });
var shorts = new Uint16Array(buffer, 512, 128);
var blobA = new Blob([blob, shorts]);
var bytes = new Unit8Array(buffter, shorts.byteOffset + shorts.byteLength);
var blobB = new Blob([blob, blobA, bytes]);
var blobC = new Blob([buffer, blob, blobA, bytes]);

通过 Blob 生成文件下载

通过浏览器的 URL 对象的 createObjectURL 方法可以根据一个 Blob 对象的二进制数据来创建一个 URL 地址并返回该地址。当用户访问该 URL 地址时可以直接下载原始的二进制数据。

See the Pen File-Blob-download by oonnnoo (@oonnnoo) on CodePen.

Blob 对象的 slice 方法

用于从 Blob 对象所代表的原始二进制数据中抽离一部分数据。

1
var newBlob = blob.slice(start, end, contentType);
1
2
3
4
5
6
7
8
9
10
11
12
var file = document.getElementById("file").files[0];
if (file) {
// 复制file对象
var fileClone = file.slice();
// 复制file对象
var fileClone2 = file.slice(0, file.size);
// 复制file对象的后半部分
var fileChunkFromEnd = file.slice(-Math.round(file.size / 2));
// 复制file对象的前半部分
var fileChunkFromStart = file.slice(0, Math.round(file.size / 2));
var fileNoMetadata = file.slice(0, -150, "application/experimental");
}

FileReader 对象

FileReader 对象主要用于将文件读入内存,并读取文件中的数据

事件

  • onabort 数据读取中断时
  • onerror 数据读取错误时
  • onloadstart 数据读取开始时
  • onprogress 数据读取中
  • onload 数据读取成功完成时
  • onloadend 数据读取完成时触发,无论成功还是失败
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var result = document.getElementById("result");
var input = document.getElementById("input");

function readFile() {
var file = document.getElementById("file").files[0];
var reader = new FileReader();
reader.onload = function(e) {
result.innerHTML = '<img src="' + this.result + '"alt=""/>';
alert("load");
};
reader.onprogress = function(e) {
alert("progress");
};
reader.onabort = function(e) {
alert("abort");
};
reader.onerror = function(e) {
alert("error");
};
reader.onloadstart = function(e) {
alert("loadstart");
};
reader.onloadend = function(e) {
alert("loadend");
};
reader.readAsDataURL(file);
}

// 时间顺序 loadstart progress load loadend

方法

方法 描述
readAsText 以文本的形式读取 Blob 对象(第二个参数可以设置文本的编码方式,默认 UTF-8)
readAsBinaryString 以二进制字符串读取 Blob 对象
readAsDataURL 以 Data URL 字符串 读取 Blob 对象
readAsArrayBuffer 以 ArrayBuffer 读取 Blob 对象

See the Pen FileReader by oonnnoo (@oonnnoo) on CodePen.

FileReader readAsArrayBuffer 示例

首先将文件中前 4 个字节中的内容复制到一个 Blob 对象中,再将 Blob 对象中的数据读取为一个 ArrayBuffer 对象,然后使用 DataView 读取该 ArrayBuffer 缓存区中位于开头的 32 位整数,最后通过比较整数值来判断文件类型

See the Pen FileReader-readAsArrayBuffer by oonnnoo (@oonnnoo) on CodePen.

更新记录

  1. 2019/4/18 21:08:02 首次发布

参考链接

本文链接:


评论内容还在加载中。。。
如无法加载,请将域名 disqus.com 和 disquscdn.com 加入到你的代理规则中