1
1
# 文件(File)和文件读取(FileReader)
2
2
3
- 文件对象 [ File] ( https://www.w3. org/TR/FileAPI/#dfn-file ) 继承自 Blob, 并扩展了文件系统相关的功能.
3
+ 文件对象 [ File] ( https://www。w3。 org/TR/FileAPI/#dfn-file ) 继承自 Blob, 并扩展了文件系统相关的功能。
4
4
5
- 获取文件对象的方法有两种.
5
+ 获取文件对象的方法有两种。
6
6
7
- 首先, 与 Blob 类似, 有构造函数:
7
+ 首先, 与 Blob 类似, 有构造函数:
8
8
9
9
``` js
10
10
new File (fileParts, fileName, [options])
11
11
```
12
12
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 ` ** -- 上次更新的时间戳 (整型日期)。
17
17
18
- 其次, 我们经常从 ` <input type="file"> ` 或 拖曳 或 其他浏览器接口来获取. 然后, 文件再从操作系统(OS)中获取.
18
+ 其次, 我们经常从 ` <input type="file"> ` 或 拖曳 或 其他浏览器接口来获取。 然后, 文件再从操作系统 (OS) 中获取。
19
19
20
20
例如:
21
21
@@ -26,21 +26,21 @@ new File(fileParts, fileName, [options])
26
26
function showFile (input ) {
27
27
let file = input .files [0 ];
28
28
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
31
31
}
32
32
</script >
33
33
```
34
34
35
35
``` smart
36
- 输入可以选择多个文件, 隐藏 `input.files` 是类似数组的对象. 此处我们只有一个文件, 隐藏我们只取 `input.files[0]`.
36
+ 输入可以选择多个文件, 隐藏 `input.files` 是类似数组的对象。 此处我们只有一个文件, 隐藏我们只取 `input.files[0]`。
37
37
```
38
38
39
39
## 文件读取(FileReader)
40
40
41
- 文件读取 [ FileReader] ( https://www.w3.org/TR/FileAPI/#dfn-filereader ) 是从 Blob (以及 ` File ` ) 对象中读取数据的对象.
41
+ 文件读取 [ FileReader] ( https://www.w3.org/TR/FileAPI/#dfn-filereader ) 是从 Blob (以及 ` File ` ) 对象中读取数据的对象。
42
42
43
- 由于从磁盘读取数据可能比较费时间, FileReader 通过事件(events)来传递数据.
43
+ 由于从磁盘读取数据可能比较费时间, FileReader 通过事件(events)来传递数据。
44
44
45
45
构造函数:
46
46
@@ -51,23 +51,23 @@ let reader = new FileReader(); // 无参构造
51
51
主要方法:
52
52
53
53
- ** ` 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
+ 读取完成后, 我们可以如此访问读取的结果:
67
67
- ` reader.result ` 是结果 (如成功)
68
- - ` reader.error ` 是错误 (如失败).
68
+ - ` reader.error ` 是错误 (如失败)。
69
69
70
- 用的最广泛的事件无疑是 ` load ` 和 ` error ` .
70
+ 用的最广泛的事件无疑是 ` load ` 和 ` error ` 。
71
71
72
72
以下是读取一个文件的示例:
73
73
@@ -94,35 +94,35 @@ function readFile(input) {
94
94
</script >
95
95
```
96
96
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),不仅仅适用于文件。
99
99
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。
104
104
```
105
105
106
106
107
107
```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)。
109
109
110
- FileReader 的读取方法 `read*` 并不生成事件, 而是会和普通函数一样返回一个结果.
110
+ FileReader 的读取方法 `read*` 并不生成事件, 而是会和普通函数一样返回一个结果。
111
111
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 则不是很重要。 并不会影响页面。
113
113
```
114
114
115
115
## 总结
116
116
117
- ` File ` 对象继承自 ` Blob ` .
117
+ ` File ` 对象继承自 ` Blob ` 。
118
118
119
- 除了 ` Blob ` 方法和属性, ` File ` 对象还有 ` fileName ` 和 ` lastModified ` 属性, 以及从文件系统读取的内部方法. 我们通常从用户输入如 ` <input> ` 或 拖拽(drag'n'drop) 来获取 ` File ` 对象.
119
+ 除了 ` Blob ` 方法和属性, ` File ` 对象还有 ` fileName ` 和 ` lastModified ` 属性, 以及从文件系统读取的内部方法。 我们通常从用户输入如 ` <input> ` 或 拖拽(drag'n'drop) 来获取 ` File ` 对象。
120
120
121
121
` FileReader ` 对象可以从文件或 blob 读取以下三种格式:
122
- - String (` readAsText ` ).
123
- - ` ArrayBuffer ` (` readAsArrayBuffer ` ).
124
- - Data url, base-64 encoded (` readAsDataURL ` ).
122
+ - String (` readAsText ` )。
123
+ - ` ArrayBuffer ` (` readAsArrayBuffer ` )。
124
+ - Data url, base-64 编码 (` readAsDataURL ` )。
125
125
126
- 但是, 多数情况下, 我们不必读取文件内容. 正如我们处理 blobs 一样, 我们可以通过 ` URL. createObjectURL(file) ` 创建一个短 url, 并将其指定给 ` <a> ` 或 ` <img> ` . 这样, 文件便可以下载或者呈现为图像, 作为画布(canvas)等的一部分.
126
+ 但是, 多数情况下, 我们不必读取文件内容。 正如我们处理 blobs 一样, 我们可以通过 ` URL。 createObjectURL(file) ` 创建一个短小的 url, 并将其指定给 ` <a> ` 或 ` <img> ` 。 这样, 文件便可以下载或者呈现为图像, 作为画布(canvas)等的一部分。
127
127
128
- 而且, 如果我们要通过网络发送一个文件(` File ` ), 也简单, 因为网络 API 如 ` XMLHttpRequest ` 或 ` fetch ` 本质上都接受 ` File ` 对象.
128
+ 而且, 如果我们要通过网络发送一个文件(` File ` ), 也简单, 因为网络 API 如 ` XMLHttpRequest ` 或 ` fetch ` 本质上都接受 ` File ` 对象。
0 commit comments