From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/blob/arraybuffer/index.html | 66 +++++++++++ files/zh-cn/web/api/blob/blob/index.html | 123 +++++++++++++++++++ files/zh-cn/web/api/blob/index.html | 150 ++++++++++++++++++++++++ files/zh-cn/web/api/blob/size/index.html | 18 +++ files/zh-cn/web/api/blob/slice/index.html | 117 ++++++++++++++++++ files/zh-cn/web/api/blob/stream/index.html | 66 +++++++++++ files/zh-cn/web/api/blob/text/index.html | 71 +++++++++++ files/zh-cn/web/api/blob/type/index.html | 73 ++++++++++++ 8 files changed, 684 insertions(+) create mode 100644 files/zh-cn/web/api/blob/arraybuffer/index.html create mode 100644 files/zh-cn/web/api/blob/blob/index.html create mode 100644 files/zh-cn/web/api/blob/index.html create mode 100644 files/zh-cn/web/api/blob/size/index.html create mode 100644 files/zh-cn/web/api/blob/slice/index.html create mode 100644 files/zh-cn/web/api/blob/stream/index.html create mode 100644 files/zh-cn/web/api/blob/text/index.html create mode 100644 files/zh-cn/web/api/blob/type/index.html (limited to 'files/zh-cn/web/api/blob') diff --git a/files/zh-cn/web/api/blob/arraybuffer/index.html b/files/zh-cn/web/api/blob/arraybuffer/index.html new file mode 100644 index 0000000000..d7a5217065 --- /dev/null +++ b/files/zh-cn/web/api/blob/arraybuffer/index.html @@ -0,0 +1,66 @@ +--- +title: Blob.arrayBuffer() +slug: Web/API/Blob/arrayBuffer +translation_of: Web/API/Blob/arrayBuffer +--- +

{{APIRef("File API")}}

+ +

arrayBuffer() 方法返回一个 {{jsxref("Promise")}} 对象，包含 blob 中的数据，并在 {{domxref("ArrayBuffer")}} 中以二进制数据的形式呈现。

+ + + +

语法

+ +
var bufferPromise = blob.arrayBuffer();
+
+blob.arrayBuffer().then(buffer => /* 处理 ArrayBuffer 数据的代码……*/);
+
+var buffer = await blob.arrayBuffer();
+ +

参数

+ +

无须提供任何参数。

+ +

返回值

+ +

返回一个 promise 对象，在 resolved 状态中以二进制的形式包含 blob 中的数据，并呈现在 {{domxref("ArrayBuffer")}} 中。

+ +

异常

+ +

当执行这个方法没有提示错误时，那么它可能会出现在 promise 的 reject 状态中。这是可能发生的，比如说在用于获取 blob 数据的一段代码抛出异常的时候。在读取数据时抛出的任何异常都会被放入 reject 状态中。

+ +

使用须知

+ +

{{domxref("FileReader.readAsArrayBuffer()")}} 这个方法与之类似，但 arrayBuffer() 返回一个 promise 对象，而不是像 FileReader 一样返回一个基于事件的 API。

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("File API", "#dom-blob-arraybuffer", "Blob.arrayBuffer()")}}{{Spec2("File API")}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.Blob.arrayBuffer")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/blob/blob/index.html b/files/zh-cn/web/api/blob/blob/index.html new file mode 100644 index 0000000000..481b6a9d82 --- /dev/null +++ b/files/zh-cn/web/api/blob/blob/index.html @@ -0,0 +1,123 @@ +--- +title: Blob() +slug: Web/API/Blob/Blob +translation_of: Web/API/Blob/Blob +--- +

{{APIRef("File API")}}

+ +

Blob() 构造函数返回一个新的 {{domxref("Blob")}} 对象。 blob的内容由参数数组中给出的值的串联组成。

+ +

语法

+ +
var aBlob = new Blob( array, options );
+
+ +

参数

+ + + +

示例

+ +
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含DOMString的数组
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob
+ +

标准

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', '#constructorBlob', 'Blob()')}}{{Spec2('File API')}}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support20{{CompatGeckoDesktop("13.0")}} [1]1012.108
in Workers{{CompatUnknown}}{{CompatGeckoDesktop("14.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("13.0")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
in Workers{{CompatUnknown}}{{CompatGeckoMobile("14.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Firefox16之前，如果第二个参数被设置为null或者undefined，会导致错误，不会自动设置为空字典。

+ +

参见

+ + + +

 

diff --git a/files/zh-cn/web/api/blob/index.html b/files/zh-cn/web/api/blob/index.html new file mode 100644 index 0000000000..8ad418dc2c --- /dev/null +++ b/files/zh-cn/web/api/blob/index.html @@ -0,0 +1,150 @@ +--- +title: Blob +slug: Web/API/Blob +tags: + - API + - Files + - Reference + - WebAPI + - 参考 + - 文件 +translation_of: Web/API/Blob +--- +
{{APIRef("File API")}}
+ +

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 {{DOMxRef("ReadableStream")}} 来用于数据操作。 

+ +

Blob 表示的不一定是JavaScript原生格式的数据。{{domxref("File")}} 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

+ +

要从其他非blob对象和数据构造一个 Blob，请使用 {{domxref("Blob.Blob", "Blob()")}} 构造函数。要创建一个 blob 数据的子集 blob，请使用 {{domxref("Blob.slice()", "slice()")}} 方法。要获取用户文件系统上的文件对应的 Blob 对象，请参阅 {{domxref("File", "File")}} 文档。

+ +

接受 Blob 对象的API也被列在 {{domxref("File", "File")}} 文档中。

+ +
注意：slice() 方法原本接受 length 作为第二个参数，以表示复制到新 Blob 对象的字节数。如果设置的参数使 start + length 超出了源 Blob 对象的大小，则返回从开始到结尾的所有数据。
+ +
注意：slice() 方法在某些浏览器和版本上带有浏览器引擎前缀：比如 Firefox 12 及更早版本的blob.mozSlice() 和 Safari 中的blob.webkitSlice()。 没有浏览器引擎前缀的老版本 slice() 方法有不同的语义，并且已过时。Firefox 30 取消了对 blob.mozSlice() 的支持。
+ +

构造函数

+ +
+
{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}
+
返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
+
+ +

属性

+ +
+
{{domxref("Blob.size")}} {{readonlyinline}}
+
Blob 对象中所包含数据的大小（字节）。
+
{{domxref("Blob.type")}} {{readonlyinline}}
+
一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。
+
+ +

方法

+ +
+
{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
+
返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。
+
{{domxref("Blob.stream()", "Blob.stream()")}}
+
返回一个能读取blob内容的 {{domxref("ReadableStream")}}。
+
{{domxref("Blob.text()", "Blob.text()")}}
+
返回一个promise且包含blob所有内容的UTF-8格式的 {{domxref("USVString")}}。
+
{{domxref("Blob.arrayBuffer()", "Blob.arrayBuffer()")}}
+
返回一个promise且包含blob所有内容的二进制格式的 {{domxref("ArrayBuffer")}} 
+
+ +

示例

+ +

Blob 构造函数用法举例

+ +

{{domxref("Blob.Blob", "Blob() 构造函数")}}允许通过其它对象创建 Blob 对象。比如，用字符串构建一个 blob：

+ +
var debug = {hello: "world"};
+var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
+ +
+

{{ domxref("BlobBuilder") }} 接口提供了另外一种创建Blob 对象的方式，但该方式现在已经废弃，不应继续使用：

+ +
var builder = new BlobBuilder();
+var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
+builder.append(fileParts[0]);
+var myBlob = builder.getBlob('text/xml');
+
+
+ +

示例：使用 Blob 创建一个指向类型化数组的URL

+ +

参考下面的代码：

+ +
var typedArray = GetTheTypedArraySomehow();
+var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'}); // 传入一个合适的 MIME 类型
+var url = URL.createObjectURL(blob);
+// 会产生一个类似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
+// 你可以像使用普通 URL 那样使用它，比如用在 img.src 上。
+
+ +

示例：从 Blob 中提取数据

+ +

一种从Blob中读取内容的方法是使用 {{domxref("FileReader")}}。以下代码将 Blob 的内容作为类型数组读取：

+ +
var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result 包含被转化为类型数组 typed array 的 blob
+});
+reader.readAsArrayBuffer(blob);
+ +

另一种读取Blob中内容的方式是使用Response对象。下述代码将Blob中的内容读取为文本：

+ +
var text = await (new Response(blob)).text();
+
+ +

通过使用 {{domxref("FileReader")}} 的其它方法可以把 Blob 读取为字符串或者数据URL。

+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('File API','#blob','Blob')}}{{Spec2('File API')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("api.Blob")}}

+ +

[1]WebKit 和 Opera 11.10 版本实现的 slice() 使用 length 来作为第二个参数。但是，因为这语法异于 {{jsxref("Array/slice", "Array.slice()")}} 和 {{jsxref("String/slice", "String.slice()")}}，WebKit 已经将其移除，并添加了 Blob.webkitSlice() 来支持这个新的语法。

+ +

[2] Firefox 4 版本实现的 slice() 使用 length来作为第二个参数。但是，因为这语法异于 {{jsxref("Array/slice", "Array.slice()")}} 和 {{jsxref("String/slice", "String.slice()")}}，Gecko 已经将其移除，并添加了 mozSlice() 来支持这个新的语法。

+ +

[3] 在Gecko 12.0 {{ geckoRelease("12.0") }} 之前，有个bug会影响 slice() 的行为，就是参数 start 和 end 的值不能超出64位有符号数字范围，现已修复。

+ +

[4] 请看 {{bug("1048325")}}。

+ +

Gecko 备注：特权许可

+ +

要使用 chrome 代码，JSM 和 Bootstrap 作用域，你必须像这样导入它:

+ +
Cu.importGlobalProperties(['Blob']);
+ +

Blob可以在 Worker 作用域内使用。

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/blob/size/index.html b/files/zh-cn/web/api/blob/size/index.html new file mode 100644 index 0000000000..54ef702af7 --- /dev/null +++ b/files/zh-cn/web/api/blob/size/index.html @@ -0,0 +1,18 @@ +--- +title: File.size +slug: Web/API/Blob/size +translation_of: Web/API/Blob/size +--- +

概述

+

返回一个File对象所指代的文件的大小，单位为字节。

+

例子

+
// fileInput是一个HTMLInputElement元素: <input type="file" multiple id="myfileinput">
+var fileInput = document.getElementById("myfileinput");
+// files是一个FileList对象(类似于NodeList)
+var files = fileInput.files;
+for (var i = 0; i < files.length; i++)
+{
+    alert(files[i].name + "文件的大小为 " + files[i].size + " 字节");
+}
+
+

{{ languages( {"en": "en/DOM/File.size" } ) }}

diff --git a/files/zh-cn/web/api/blob/slice/index.html b/files/zh-cn/web/api/blob/slice/index.html new file mode 100644 index 0000000000..7b0dff2d4d --- /dev/null +++ b/files/zh-cn/web/api/blob/slice/index.html @@ -0,0 +1,117 @@ +--- +title: Blob.slice +slug: Web/API/Blob/slice +translation_of: Web/API/Blob/slice +--- +

{{APIRef("File API")}}

+ +

Blob.slice() 方法用于创建一个包含源 {{domxref("Blob")}}的指定字节范围内的数据的新 {{domxref("Blob")}} 对象。

+ +
注释: 请注意, 在某些浏览器和版本上具有供应商前缀：例如：Firefox 12及更早版本的blob.mozSlice() 和 Safari中的 blob.webkitSlice(). slice() 方法的旧版本，没有供应商前缀，具有不同的语义，并且已过时。
+ +

语法

+ +
var blob = instanceOfBlob.slice([start [, end [, contentType]]]};
+ +

参数

+ +
+
start {{ optional_inline() }}
+
这个参数代表 {{domxref("Blob")}} 里的下标，表示第一个会被会被拷贝进新的 {{domxref("Blob")}} 的字节的起始位置。如果你传入的是一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。举例来说, -10 将会是  {{domxref("Blob")}} 的倒数第十个字节。它的默认值是0， 如果你传入的start的长度大于源 {{domxref("Blob")}} 的长度，那么返回的将会是一个长度为0并且不包含任何数据的一个 {{domxref("Blob")}} 对象。
+
end {{ optional_inline() }}
+
这个参数代表的是 {{domxref("Blob")}} 的一个下标，这个下标-1的对应的字节将会是被拷贝进新的{{domxref("Blob")}} 的最后一个字节。如果你传入了一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。举例来说， -10 将会是 {{domxref("Blob")}} 的倒数第十个字节。它的默认值就是它的原始长度(size).
+
contentType {{ optional_inline() }}
+
给新的 {{domxref("Blob")}} 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。
+
+ +

返回值

+ +

一个新的 {{domxref("Blob")}} 对象，它包含了原始 {{domxref("Blob")}} 对象的某一个段的数据。

+ +

规范

+ + + + + + + + + + + + + + +
规范状态注释
{{SpecName('File API','#dfn-slice','slice')}}{{Spec2('File API')}}Initial definition.
+ +

浏览器兼容

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
功能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本支持10 {{property_prefix("webkit")}}‡
+ 21		5 {{ property_prefix("moz") }}‡
+ 13		10125.1 (534.29) {{ property_prefix("webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
功能AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本支持{{ CompatUnknown() }}{{ CompatGeckoMobile("13.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

实现 slice() 的一些声明

+ +

slice() 方法第二个参数的默认值将会传入原始 Blob 的长度。 如果你在调用的时候传入的 start + length 超出了原始 Blob 的长度，那么返回的 Blob  对象将会包含从 start 到原始数据的末尾。

+ +

那个版本的 slice() 在 Firefox 4、 WebKit 和 Opera 11.10 中实现了。但是它的语法和 Array.slice() 以及 String.slice() 有所出入，所以 Gecko 和 Webkit 移除掉了它的支持并且加上了新语法的支持  {{ manch("mozSlice") }}/Blob.webkitSlice。

+ +

从 Gecko 13.0 {{ geckoRelease("13.0") }} 和 Chrome 21 开始, {{ manch("slice") }} 就再也没有浏览器前缀了。

+ +

Gecko notes

+ +

在先前的 Gecko 12.0 {{ geckoRelease("12.0") }}， 有一个 bug 会影响到 {{ manch("slice") }} 的行为; 他在 start 和 end 位置组成的范围超出 signed 64-bit 值的范围的时候不工作; 这个问题已经被解决，现在支持传入 unsigned 64-bit 值.

+ +

参见

+ + diff --git a/files/zh-cn/web/api/blob/stream/index.html b/files/zh-cn/web/api/blob/stream/index.html new file mode 100644 index 0000000000..c14f5faa1c --- /dev/null +++ b/files/zh-cn/web/api/blob/stream/index.html @@ -0,0 +1,66 @@ +--- +title: Blob.stream() +slug: Web/API/Blob/stream +tags: + - API + - Blob + - stream + - 文件读写 +translation_of: Web/API/Blob/stream +--- +

{{APIRef("File API")}}

+ +

{{domxref("Blob")}}接口的stream() 方法返回一个{{domxref("ReadableStream")}}对象，读取它将返回包含在Blob中的数据。

+ +

语法

+ +
var stream = blob.stream();
+ +

参数

+ +

无。

+ +

返回值

+ +

一个{{domxref("ReadableStream")}}对象，读取后返回 Blob的内容。

+ +

使用说明

+ +

使用 stream() 函数与其返回的{{domxref("ReadableStream")}}对象，你将得到一些有趣的能力：

+ + + +

标准

+ + + + + + + + + + + + + + +
标准状态注释
{{SpecName("File API", "#dom-blob-stream", "Blob.stream()")}}{{Spec2("File API")}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.Blob.stream")}}

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/api/blob/text/index.html b/files/zh-cn/web/api/blob/text/index.html new file mode 100644 index 0000000000..45df1aa79b --- /dev/null +++ b/files/zh-cn/web/api/blob/text/index.html @@ -0,0 +1,71 @@ +--- +title: Blob.text() +slug: Web/API/Blob/text +tags: + - 数据 + - 文本 +translation_of: Web/API/Blob/text +--- +
{{APIRef("File API")}}
+ +

text() 方法返回一个 {{jsxref("Promise")}} 对象，包含 blob 中的内容，使用 UTF-8 格式编码。

+ + + +

语法

+ +
var textPromise = blob.text();
+
+blob.text().then(text => /* 执行的操作…… */);
+
+var text = await blob.text();
+
+ +

参数

+ +

无须提供任何参数。

+ +

返回值

+ +

返回一个 promise 对象，以 resolve 状态返回一个以文本形式包含 blob 中数据的 {{domxref("USVString")}}。并且该数据总是被识别为 UTF-8 格式。

+ +

使用须知

+ +

{{domxref("FileReader")}} 的 {{domxref("FileReader.readAsText", "readAsText()")}} 方法是一个与之类似的方法，它对 Blob 和 {{domxref("File")}} 对象都适用。下面是两个主要的不同之处：

+ + + +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("File API", "#dom-blob-text", "Blob.text()")}}{{Spec2("File API")}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.Blob.text")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/blob/type/index.html b/files/zh-cn/web/api/blob/type/index.html new file mode 100644 index 0000000000..a06399628c --- /dev/null +++ b/files/zh-cn/web/api/blob/type/index.html @@ -0,0 +1,73 @@ +--- +title: Blob.type +slug: Web/API/Blob/type +tags: + - API + - DOM + - File + - Files + - 参考 + - 属性 + - 文件 +translation_of: Web/API/Blob/type +--- +
{{APIRef("File API")}}
+ +

Blob 对象的 type 属性给出文件的 MIME 类型。如果类型无法确定，则返回空字符串。

+ +

语法

+ +
var mimetype = instanceOfFile.type
+ +

值

+ +

字符串

+ +

例子

+ +
// fileInput是一个 HTMLInputElement，HTML Input 元素: <input type="file" multiple id="myfileinput">
+var fileInput = document.getElementById("myfileinput");
+
+// files 是一个 FileList 对象（与 NodeList 相似，是多个 File 对象的集合）
+var files = fileInput.files;
+
+// 仅允许 *.png, *.jpeg *.gif 类型的图片文件
+var allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+for (var i = 0; i < files.length; i++) {
+    // 检查文件的文件类型是否属于 allowFileTypes 中的一种
+    if (allowedFileTypes.indexOf(files[i].type) > -1) {
+        // 对符合条件的文件进行处理
+    }
+}
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('File API', '#dfn-type', 'type')}}{{Spec2('File API')}}Initial definition.
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.Blob.type")}}

+
+ +

参见

+ + -- cgit v1.2.3-54-g00ecf