Skip to content

Commit

Permalink
[zh-cn]: sync translation for FileReader.{abort(), abort, load} (#2…
Browse files Browse the repository at this point in the history
  • Loading branch information
skyclouds2001 authored May 15, 2024
1 parent 5ce00e1 commit 32f4b80
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 65 deletions.
21 changes: 13 additions & 8 deletions files/zh-cn/web/api/filereader/abort/index.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
---
title: FileReader.abort()
title: FileReaderabort() 方法
slug: Web/API/FileReader/abort
l10n:
sourceCommit: e43bfd9b4a6c363a4ba7ef6ffa64c09b38fd111b
---

{{APIRef("File API")}}
{{APIRef("File API")}}{{AvailableInWorkers}}

该方法可以取消 FileReader 的读取操作,触发之后 {{domxref("FileReader.readyState","readyState")}} 为已完成(DONE
{{domxref("FileReader")}} 接口的 **`abort()`** 方法中止读取操作。返回后,{{domxref("FileReader.readyState","readyState")}} 将为 `DONE`

## 语法

```plain
instanceOfFileReader.abort();
```js-nolint
abort()
```

### 例外情况
### 参数

- `DOM_FILE_ABORT_ERR`
- : 对一个没有正在进行读取操作({{domxref("FileReader.readyState","readyState")}} 不是 `LOADING`)的 `FileReader` 进行 `abort` 操作,会抛出 `DOM_FILE_ABORT_ERR` 错误。
无。

### 返回值

无({{jsxref("undefined")}})。

## 规范

Expand Down
28 changes: 14 additions & 14 deletions files/zh-cn/web/api/filereader/abort_event/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@
title: FileReader:abort 事件
slug: Web/API/FileReader/abort_event
l10n:
sourceCommit: 497d322c61511b11e4877a77660f8d7b394a8277
sourceCommit: e43bfd9b4a6c363a4ba7ef6ffa64c09b38fd111b
---

{{APIRef("File API")}}{{AvailableInWorkers}}

**`abort`** 事件会在读取操作被中止时触发:例如,当程序调用了 {{domxref("FileReader.abort()")}} 方法。
{{domxref("FileReader")}} 接口的 **`abort`** 事件在读取被中止时触发:例如因为程序调用了 {{domxref("FileReader.abort()")}} 方法。

此事件不可取消且不会冒泡。

## 语法

在类似 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 这样的方法中使用事件名称,或设置事件处理器属性。
{{domxref("EventTarget.addEventListener", "addEventListener()")}} 等方法中使用事件名称,或设置事件处理器属性。

```js
addEventListener("abort", (event) => {});
Expand All @@ -23,31 +23,31 @@ onabort = (event) => {};

## 事件类型

{{domxref("ProgressEvent")}}。继承于 {{domxref("Event")}}。
{{domxref("ProgressEvent")}}。继承自 {{domxref("Event")}}。

{{InheritanceDiagram("ProgressEvent")}}

## 事件属性

_该属性也继承了其父类 {{domxref("Event")}} 的属性_
_还继承其父级 {{domxref("Event")}} 的属性。_

- {{domxref("ProgressEvent.lengthComputable")}} {{ReadOnlyInline}}
- : 一个布尔标志,表示底层进程要完成的总工作量及已完成的工作量是否可计算。换句话说,它表明进度是否可以衡量
- : 一个布尔标志,指示底层进程要完成的总工作量以及已完成的工作量是否可计算。换句话说,它表明进展是否可衡量
- {{domxref("ProgressEvent.loaded")}} {{ReadOnlyInline}}
- : 一个 64 位无符号整数值,表示底层进程已完成的工作量。完成工作的比例可以通过除以 `total` 属性的值来计算。当使用 HTTP 下载资源时,这仅计算 HTTP 消息的主体的大小,并且不包括标头以及其他开销
- : 一个 64 位无符号整数值,指示底层进程已执行的工作量。完成工作的比率可以通过将 `total` 除以该属性的值来计算。使用 HTTP 下载资源时,仅计算 HTTP 消息的正文,不包括标头和其他开销
- {{domxref("ProgressEvent.total")}} {{ReadOnlyInline}}
- : 一个 64 位无符号整数,表示底层进程正在执行的总工作量。当使用 HTTP 下载资源时,这是 `Content-Length`消息体的大小),并且不包括标头以及其他开销
- : 一个 64 位无符号整数,表示底层进程正在执行的工作总量。使用 HTTP 下载资源时,这是 `Content-Length`消息正文的大小),不包括标头和其他开销

## 示例

### 在线示例
### 实时示例

#### HTML

```html
<div class="example">
<div class="file-select">
<label for="avatar">选择你的头像:</label>
<label for="avatar">选择个人资料图片:</label>
<input
type="file"
id="avatar"
Expand All @@ -58,7 +58,7 @@ _该属性也继承了其父类 {{domxref("Event")}} 的属性_。
<img src="" class="preview" height="200" alt="图片预览" />

<div class="event-log">
<label for="eventLog">事件输出:</label>
<label for="eventLog">事件日志:</label>
<textarea readonly class="event-log-contents" id="eventLog"></textarea>
</div>
</div>
Expand Down Expand Up @@ -111,7 +111,7 @@ const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
eventLog.textContent += `${event.type}:传输了 ${event.loaded} 个字节\n`;
eventLog.textContent += `${event.type}:传输了 ${event.loaded} 字节\n`;

if (event.type === "load") {
preview.src = reader.result;
Expand Down Expand Up @@ -142,7 +142,7 @@ fileInput.addEventListener("change", handleSelected);

#### 结果

{{ EmbedLiveSample('在线示例', '100%', '300px') }}
{{ EmbedLiveSample('实时示例', '100%', '300px') }}

## 规范

Expand All @@ -154,4 +154,4 @@ fileInput.addEventListener("change", handleSelected);

## 参见

- 相关事件:{{domxref("FileReader.loadstart_event", "loadstart")}}、{{domxref("FileReader.loadend_event", "loadend")}}、{{domxref("FileReader.progress_event", "progress")}}、{{domxref("FileReader.error_event", "error")}}、{{domxref("FileReader.load_event", "load")}}
- 相关事件:{{domxref("FileReader.loadstart_event", "loadstart")}}、{{domxref("FileReader.loadend_event", "loadend")}}、{{domxref("FileReader.progress_event", "progress")}}、{{domxref("FileReader.error_event", "error")}}、{{domxref("FileReader.load_event", "load")}}
92 changes: 49 additions & 43 deletions files/zh-cn/web/api/filereader/load_event/index.md
Original file line number Diff line number Diff line change
@@ -1,55 +1,65 @@
---
title: "FileReader: load event"
title: FileReaderload 事件
slug: Web/API/FileReader/load_event
l10n:
sourceCommit: e43bfd9b4a6c363a4ba7ef6ffa64c09b38fd111b
---

{{APIRef}}

当文件成功读取时,执行`load` 事件

<table class="properties">
<tbody>
<tr>
<th scope="row">是否冒泡</th>
<td>No</td>
</tr>
<tr>
<th scope="row">是否能中断退出</th>
<td>No</td>
</tr>
<tr>
<th scope="row">调用接口</th>
<td>{{domxref("ProgressEvent")}}</td>
</tr>
<tr>
<th scope="row">事件处理属性</th>
<td>{{domxref("FileReader.onload")}}</td>
</tr>
</tbody>
</table>

## 例子

### Live example
{{APIRef("File API")}}{{AvailableInWorkers}}

{{domxref("FileReader")}} 接口的 **`load`** 事件在成功读取文件时触发。

此事件不可取消且不会冒泡。

## 语法

在 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等方法中使用事件名称,或设置事件处理器属性。

```js
addEventListener("load", (event) => {});

onload = (event) => {};
```

## 事件类型

{{domxref("ProgressEvent")}}。继承自 {{domxref("Event")}}。

{{InheritanceDiagram("ProgressEvent")}}

## 事件属性

_还继承其父级 {{domxref("Event")}} 的属性。_

- {{domxref("ProgressEvent.lengthComputable")}} {{ReadOnlyInline}}
- : 一个布尔标志,指示底层进程要完成的总工作量以及已完成的工作量是否可计算。换句话说,它表明进展是否可衡量。
- {{domxref("ProgressEvent.loaded")}} {{ReadOnlyInline}}
- : 一个 64 位无符号整数值,指示底层进程已执行的工作量。完成工作的比率可以通过将 `total` 除以该属性的值来计算。使用 HTTP 下载资源时,仅计算 HTTP 消息的正文,不包括标头和其他开销。
- {{domxref("ProgressEvent.total")}} {{ReadOnlyInline}}
- : 一个 64 位无符号整数,表示底层进程正在执行的工作总量。使用 HTTP 下载资源时,这是 `Content-Length`(消息正文的大小),不包括标头和其他开销。

## 示例

### 实时示例

#### HTML

```html
<div class="example">
<div class="file-select">
<label for="avatar">Choose a profile picture:</label>
<label for="avatar">选择个人资料图片:</label>
<input
type="file"
id="avatar"
name="avatar"
accept="image/png, image/jpeg" />
</div>

<img src="" class="preview" height="200" alt="Image preview..." />
<img src="" class="preview" height="200" alt="图片预览" />

<div class="event-log">
<label>Event log:</label>
<textarea readonly class="event-log-contents"></textarea>
<label for="eventLog">事件日志:</label>
<textarea readonly class="event-log-contents" id="eventLog"></textarea>
</div>
</div>
```
Expand All @@ -65,6 +75,7 @@ img.preview {
border: 1px solid black;
margin: 0.2rem;
padding: 0.2rem;
resize: none;
}

.example {
Expand All @@ -89,13 +100,9 @@ img.preview {
.event-log > label {
display: block;
}

.event-log-contents {
resize: none;
}
```

#### JS
#### JavaScript

```js
const fileInput = document.querySelector('input[type="file"]');
Expand All @@ -104,8 +111,7 @@ const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
eventLog.textContent =
eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
eventLog.textContent += `${event.type}:传输了 ${event.loaded} 字节\n`;

if (event.type === "load") {
preview.src = reader.result;
Expand Down Expand Up @@ -135,7 +141,7 @@ fileInput.addEventListener("change", handleSelected);

#### 结果

{{ EmbedLiveSample('Live_example', '100%', '300px') }}
{{ EmbedLiveSample('实时示例', '100%', '300px') }}

## 规范

Expand All @@ -145,6 +151,6 @@ fileInput.addEventListener("change", handleSelected);

{{Compat}}

## 请参阅
## 参见

- Related events: {{domxref("FileReader.loadstart_event")}}, {{domxref("FileReader.loadend_event")}}, {{domxref("FileReader.progress_event")}}, {{domxref("FileReader.error_event")}}, {{domxref("FileReader.abort_event")}}
- 相关事件:{{domxref("FileReader.loadstart_event", "loadstart")}}{{domxref("FileReader.loadend_event", "loadend")}}{{domxref("FileReader.progress_event", "progress")}}{{domxref("FileReader.error_event", "error")}}{{domxref("FileReader.abort_event", "abort")}}

0 comments on commit 32f4b80

Please sign in to comment.