Skip to content

Commit 0cf94e8

Browse files
committedOct 26, 2019
update trans
1 parent 37275c9 commit 0cf94e8

File tree

1 file changed

+19
-19
lines changed

1 file changed

+19
-19
lines changed
 

‎4-binary/04-file/article.md

+19-19
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# 文件(File)和文件读取(FileReader)
1+
# 文件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

55
获取文件对象的方法有两种。
66

@@ -13,9 +13,9 @@ new File(fileParts, fileName, [options])
1313
- **`fileParts`** -- Blob/BufferSource/String 类型值的数组,同 `Blob`
1414
- **`fileName`** -- 文件名字符串。
1515
- **`options`** -- 可选对象:
16-
- **`lastModified`** -- 上次更新的时间戳 (整型日期)
16+
- **`lastModified`** -- 上次更新的时间戳整型日期
1717

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

2020
例如:
2121

@@ -33,14 +33,14 @@ function showFile(input) {
3333
```
3434

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

39-
## 文件读取(FileReader)
39+
## 文件读取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,7 +51,7 @@ let reader = new FileReader(); // 无参构造
5151
主要方法:
5252

5353
- **`readAsArrayBuffer(blob)`** -- 读取数据为 `ArrayBuffer`
54-
- **`readAsText(blob, [encoding])`** -- 读取数据为字符串 (默认 `utf-8` 编码)
54+
- **`readAsText(blob, [encoding])`** -- 读取数据为字符串默认 `utf-8` 编码
5555
- **`readAsDataURL(blob)`** -- 将数据编码为 base64 的数据 url。
5656
- **`abort()`** -- 取消操作。
5757

@@ -64,8 +64,8 @@ let reader = new FileReader(); // 无参构造
6464
- `loadend` -- 读取完成,或成功或失败。
6565

6666
读取完成后,我们可以如此访问读取的结果:
67-
- `reader.result` 是结果 (如成功)
68-
- `reader.error` 是错误 (如失败)
67+
- `reader.result` 是结果如成功
68+
- `reader.error` 是错误如失败
6969

7070
用的最广泛的事件无疑是 `load``error`
7171

@@ -95,11 +95,11 @@ function readFile(input) {
9595
```
9696

9797
```smart header="`FileReader` 用于 blobs"
98-
<info:blob> 一章中我们提到,`FileReader` 适用于任何块(blobs),不仅仅适用于文件。
98+
<info:blob> 一章中我们提到,`FileReader` 适用于任何块blobs,不仅仅适用于文件。
9999

100100
因此我们可以用它将一个 blob 转换为其他格式:
101101
- `readAsArrayBuffer(blob)` -- 转换为 `ArrayBuffer`,
102-
- `readAsText(blob, [encoding])` -- 转换为字符串 (替代 `TextDecoder`),
102+
- `readAsText(blob, [encoding])` -- 转换为字符串替代 `TextDecoder`,
103103
- `readAsDataURL(blob)` -- 转换为 base64 的数据 url。
104104
```
105105
@@ -109,20 +109,20 @@ function readFile(input) {
109109
110110
FileReader 的读取方法 `read*` 并不生成事件,而是会和普通函数一样返回一个结果。
111111
112-
不过,那只是在 Web Worker 内部, 因为在读取文件的时候,同步调用会有延迟,而在 Web Workers 则不是很重要并不会影响页面。
112+
不过,那只是在 Web Worker 内部,因为在读取文件的时候,同步调用会有延迟,而在 Web Workers 则不是很重要并不会影响页面。
113113
```
114114

115115
## 总结
116116

117117
`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`)。
122+
- 字符串 (`readAsText`)。
123123
- `ArrayBuffer` (`readAsArrayBuffer`)。
124-
- Data url,base-64 编码 (`readAsDataURL`)。
124+
- 数据 url,base-64 编码`readAsDataURL`)。
125125

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

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

0 commit comments

Comments
 (0)
Please sign in to comment.