Skip to content

Commit 37275c9

Browse files
committed
update trans
1 parent 38df56e commit 37275c9

File tree

1 file changed

+44
-44
lines changed

1 file changed

+44
-44
lines changed

4-binary/04-file/article.md

+44-44
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
# 文件(File)和文件读取(FileReader)
22

3-
文件对象 [File](https://www.w3.org/TR/FileAPI/#dfn-file) 继承自 Blob, 并扩展了文件系统相关的功能.
3+
文件对象 [File](https://www。w3。org/TR/FileAPI/#dfn-file) 继承自 Blob并扩展了文件系统相关的功能
44

5-
获取文件对象的方法有两种.
5+
获取文件对象的方法有两种
66

7-
首先, 与 Blob 类似, 有构造函数:
7+
首先与 Blob 类似有构造函数:
88

99
```js
1010
new File(fileParts, fileName, [options])
1111
```
1212

13-
- **`fileParts`** -- is an array of Blob/BufferSource/String value, same as `Blob`.
14-
- **`fileName`** -- file name string.
15-
- **`options`** -- optional object:
16-
- **`lastModified`** -- a timestamp (integer date) of last modification.
13+
- **`fileParts`** -- Blob/BufferSource/String 类型值的数组,同 `Blob`
14+
- **`fileName`** -- 文件名字符串。
15+
- **`options`** -- 可选对象:
16+
- **`lastModified`** -- 上次更新的时间戳 (整型日期)。
1717

18-
其次, 我们经常从 `<input type="file">` 或 拖曳 或 其他浏览器接口来获取. 然后, 文件再从操作系统(OS)中获取.
18+
其次我们经常从 `<input type="file">` 或 拖曳 或 其他浏览器接口来获取 然后文件再从操作系统 (OS) 中获取
1919

2020
例如:
2121

@@ -26,21 +26,21 @@ new File(fileParts, fileName, [options])
2626
function showFile(input) {
2727
let file = input.files[0];
2828
29-
alert(`File name: ${file.name}`); // e.g my.png
30-
alert(`Last modified: ${file.lastModified}`); // e.g 1552830408824
29+
alert(`File name: ${file.name}`); // 例如 my.png
30+
alert(`Last modified: ${file.lastModified}`); // 例如 1552830408824
3131
}
3232
</script>
3333
```
3434

3535
```smart
36-
输入可以选择多个文件, 隐藏 `input.files` 是类似数组的对象. 此处我们只有一个文件, 隐藏我们只取 `input.files[0]`.
36+
输入可以选择多个文件隐藏 `input.files` 是类似数组的对象 此处我们只有一个文件隐藏我们只取 `input.files[0]`
3737
```
3838

3939
## 文件读取(FileReader)
4040

41-
文件读取 [FileReader](https://www.w3.org/TR/FileAPI/#dfn-filereader) 是从 Blob (以及 `File` ) 对象中读取数据的对象.
41+
文件读取 [FileReader](https://www.w3.org/TR/FileAPI/#dfn-filereader) 是从 Blob (以及 `File` ) 对象中读取数据的对象
4242

43-
由于从磁盘读取数据可能比较费时间, FileReader 通过事件(events)来传递数据.
43+
由于从磁盘读取数据可能比较费时间FileReader 通过事件(events)来传递数据
4444

4545
构造函数:
4646

@@ -51,23 +51,23 @@ let reader = new FileReader(); // 无参构造
5151
主要方法:
5252

5353
- **`readAsArrayBuffer(blob)`** -- 读取数据为 `ArrayBuffer`
54-
- **`readAsText(blob, [encoding])`** -- read the data as a string (encoding is `utf-8` by default)
55-
- **`readAsDataURL(blob)`** -- encode the data as base64 data url.
56-
- **`abort()`** -- cancel the operation.
57-
58-
数据读取期间, 有以下事件:
59-
- `loadstart` -- 开始加载.
60-
- `progress` -- 读取过程中出现.
61-
- `load` -- 读取完毕, 没有错误.
62-
- `abort` -- 调用`abort()` .
63-
- `error` -- 出现错误.
64-
- `loadend` -- 读取完成, 或成功或失败.
65-
66-
读取完成后, 我们可以如此访问读取的结果:
54+
- **`readAsText(blob, [encoding])`** -- 读取数据为字符串 (默认 `utf-8` 编码)
55+
- **`readAsDataURL(blob)`** -- 将数据编码为 base64 的数据 url
56+
- **`abort()`** -- 取消操作。
57+
58+
数据读取期间有以下事件:
59+
- `loadstart` -- 开始加载
60+
- `progress` -- 读取过程中出现
61+
- `load` -- 读取完毕没有错误
62+
- `abort` -- 调用 `abort()`
63+
- `error` -- 出现错误
64+
- `loadend` -- 读取完成或成功或失败
65+
66+
读取完成后我们可以如此访问读取的结果:
6767
- `reader.result` 是结果 (如成功)
68-
- `reader.error` 是错误 (如失败).
68+
- `reader.error` 是错误 (如失败)
6969

70-
用的最广泛的事件无疑是 `load``error`.
70+
用的最广泛的事件无疑是 `load``error`
7171

7272
以下是读取一个文件的示例:
7373

@@ -94,35 +94,35 @@ function readFile(input) {
9494
</script>
9595
```
9696

97-
```smart header="`FileReader` for blobs"
98-
As mentioned in the chapter <info:blob>, `FileReader` works for any blobs, not just files.
97+
```smart header="`FileReader` 用于 blobs"
98+
<info:blob> 一章中我们提到,`FileReader` 适用于任何块(blobs),不仅仅适用于文件。
9999

100-
So we can use it to convert a blob to another format:
101-
- `readAsArrayBuffer(blob)` -- to `ArrayBuffer`,
102-
- `readAsText(blob, [encoding])` -- to string (an alternative to `TextDecoder`),
103-
- `readAsDataURL(blob)` -- to base64 data url.
100+
因此我们可以用它将一个 blob 转换为其他格式:
101+
- `readAsArrayBuffer(blob)` -- 转换为 `ArrayBuffer`,
102+
- `readAsText(blob, [encoding])` -- 转换为字符串 (替代 `TextDecoder`),
103+
- `readAsDataURL(blob)` -- 转换为 base64 的数据 url
104104
```
105105
106106
107107
```smart header="`FileReaderSync` 只适用于 workers "
108-
对于 Web Workers, there also exists a synchronous variant of `FileReader`, called [FileReaderSync](https://www.w3.org/TR/FileAPI/#FileReaderSync).
108+
对于 Web Workers,还有一种同步的 `FileReader` 类型,称为 [FileReaderSync](https://www.w3.org/TR/FileAPI/#FileReaderSync)
109109
110-
FileReader 的读取方法 `read*` 并不生成事件, 而是会和普通函数一样返回一个结果.
110+
FileReader 的读取方法 `read*` 并不生成事件而是会和普通函数一样返回一个结果
111111
112-
不过, 那只是在 Web Worker 内部, 因为同步调用会有延迟, because delays in synchronous calls, that are possible while reading from files, in Web Workers are less important. 并不会影响页面.
112+
不过那只是在 Web Worker 内部, 因为在读取文件的时候,同步调用会有延迟,而在 Web Workers 则不是很重要。 并不会影响页面
113113
```
114114

115115
## 总结
116116

117-
`File` 对象继承自 `Blob`.
117+
`File` 对象继承自 `Blob`
118118

119-
除了 `Blob` 方法和属性, `File` 对象还有 `fileName``lastModified` 属性, 以及从文件系统读取的内部方法. 我们通常从用户输入如 `<input>` 或 拖拽(drag'n'drop) 来获取 `File` 对象.
119+
除了 `Blob` 方法和属性`File` 对象还有 `fileName``lastModified` 属性以及从文件系统读取的内部方法 我们通常从用户输入如 `<input>` 或 拖拽(drag'n'drop) 来获取 `File` 对象
120120

121121
`FileReader` 对象可以从文件或 blob 读取以下三种格式:
122-
- String (`readAsText`).
123-
- `ArrayBuffer` (`readAsArrayBuffer`).
124-
- Data url, base-64 encoded (`readAsDataURL`).
122+
- String (`readAsText`)
123+
- `ArrayBuffer` (`readAsArrayBuffer`)
124+
- Data urlbase-64 编码 (`readAsDataURL`)
125125

126-
但是, 多数情况下, 我们不必读取文件内容. 正如我们处理 blobs 一样, 我们可以通过 `URL.createObjectURL(file)` 创建一个短 url, 并将其指定给 `<a>``<img>`. 这样, 文件便可以下载或者呈现为图像, 作为画布(canvas)等的一部分.
126+
但是多数情况下我们不必读取文件内容 正如我们处理 blobs 一样我们可以通过 `URLcreateObjectURL(file)` 创建一个短小的 url并将其指定给 `<a>``<img>` 这样文件便可以下载或者呈现为图像作为画布(canvas)等的一部分
127127

128-
而且, 如果我们要通过网络发送一个文件(`File`), 也简单, 因为网络 API 如 `XMLHttpRequest``fetch` 本质上都接受 `File` 对象.
128+
而且如果我们要通过网络发送一个文件(`File`)也简单因为网络 API 如 `XMLHttpRequest``fetch` 本质上都接受 `File` 对象

0 commit comments

Comments
 (0)