1
- # 文件( File) 和文件读取( FileReader)
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
@@ -13,9 +13,9 @@ new File(fileParts, fileName, [options])
13
13
- ** ` fileParts ` ** -- Blob/BufferSource/String 类型值的数组,同 ` Blob ` 。
14
14
- ** ` fileName ` ** -- 文件名字符串。
15
15
- ** ` options ` ** -- 可选对象:
16
- - ** ` lastModified ` ** -- 上次更新的时间戳 ( 整型日期) 。
16
+ - ** ` lastModified ` ** -- 上次更新的时间戳( 整型日期) 。
17
17
18
- 其次,我们经常从 ` <input type="file"> ` 或 拖曳 或 其他浏览器接口来获取。 然后,文件再从操作系统 ( OS) 中获取 。
18
+ 其次,我们经常从 ` <input type="file"> ` 或 拖拽 或 其他浏览器接口来获取。 然后,再从操作系统( OS) 中获取文件 。
19
19
20
20
例如:
21
21
@@ -33,14 +33,14 @@ function showFile(input) {
33
33
```
34
34
35
35
``` smart
36
- 输入可以选择多个文件,隐藏 `input.files` 是类似数组的对象。 此处我们只有一个文件,隐藏我们只取 `input.files[0]`。
36
+ 输入(input)可以选择多个文件, 因此 `input.files` 是类似数组的对象。 此处我们只有一个文件,因此我们只取 `input.files[0]`。
37
37
```
38
38
39
- ## 文件读取( FileReader)
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,7 +51,7 @@ let reader = new FileReader(); // 无参构造
51
51
主要方法:
52
52
53
53
- ** ` readAsArrayBuffer(blob) ` ** -- 读取数据为 ` ArrayBuffer `
54
- - ** ` readAsText(blob, [encoding]) ` ** -- 读取数据为字符串 ( 默认 ` utf-8 ` 编码)
54
+ - ** ` readAsText(blob, [encoding]) ` ** -- 读取数据为字符串( 默认 ` utf-8 ` 编码)
55
55
- ** ` readAsDataURL(blob) ` ** -- 将数据编码为 base64 的数据 url。
56
56
- ** ` abort() ` ** -- 取消操作。
57
57
@@ -64,8 +64,8 @@ let reader = new FileReader(); // 无参构造
64
64
- ` loadend ` -- 读取完成,或成功或失败。
65
65
66
66
读取完成后,我们可以如此访问读取的结果:
67
- - ` reader.result ` 是结果 ( 如成功)
68
- - ` reader.error ` 是错误 ( 如失败) 。
67
+ - ` reader.result ` 是结果( 如成功)
68
+ - ` reader.error ` 是错误( 如失败) 。
69
69
70
70
用的最广泛的事件无疑是 ` load ` 和 ` error ` 。
71
71
@@ -95,11 +95,11 @@ function readFile(input) {
95
95
```
96
96
97
97
```smart header="` FileReader ` 用于 blobs"
98
- 在 < info:blob > 一章中我们提到,` FileReader ` 适用于任何块( blobs) ,不仅仅适用于文件。
98
+ 在 < info:blob > 一章中我们提到,` FileReader ` 适用于任何块( blobs) ,不仅仅适用于文件。
99
99
100
100
因此我们可以用它将一个 blob 转换为其他格式:
101
101
- ` readAsArrayBuffer(blob) ` -- 转换为 ` ArrayBuffer ` ,
102
- - ` readAsText(blob, [encoding]) ` -- 转换为字符串 ( 替代 ` TextDecoder ` ) ,
102
+ - ` readAsText(blob, [encoding]) ` -- 转换为字符串( 替代 ` TextDecoder ` ) ,
103
103
- ` readAsDataURL(blob) ` -- 转换为 base64 的数据 url。
104
104
```
105
105
@@ -109,20 +109,20 @@ function readFile(input) {
109
109
110
110
FileReader 的读取方法 `read*` 并不生成事件,而是会和普通函数一样返回一个结果。
111
111
112
- 不过,那只是在 Web Worker 内部, 因为在读取文件的时候,同步调用会有延迟,而在 Web Workers 则不是很重要。 并不会影响页面。
112
+ 不过,那只是在 Web Worker 内部,因为在读取文件的时候,同步调用会有延迟,而在 Web Workers 则不是很重要, 并不会影响页面。
113
113
```
114
114
115
115
## 总结
116
116
117
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 ` )。
122
+ - 字符串 (` readAsText ` )。
123
123
- ` ArrayBuffer ` (` readAsArrayBuffer ` )。
124
- - Data url,base-64 编码 ( ` readAsDataURL ` )。
124
+ - 数据 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