Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[zh-cn]: sync translation for FileReader.{abort(), abort, load} #20359

Merged
merged 6 commits into from
May 15, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
26 changes: 13 additions & 13 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 @@ -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} bytes transferred\n`;
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved

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")}}