You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 4-binary/04-file/article.md
+14-14Lines changed: 14 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
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
@@ -15,7 +15,7 @@ new File(fileParts, fileName, [options])
15
15
-**`options`** -- необязательный объект:
16
16
-**`lastModified`** -- timestamp (целочисленная дата) последнего изменения.
17
17
18
-
Во-вторых, чаще всего мы получаем файл из `<input type="file">`, или drag'n'drop, или других интерфейсов браузера. Затем этот файл получает нужную информацию из ОС.
18
+
Во-вторых, чаще всего мы получаем файл из `<input type="file">` или drag'n'drop, или других интерфейсов браузера. Затем этот файл получает нужную информацию из ОС.
19
19
20
20
Например:
21
21
@@ -26,14 +26,14 @@ new File(fileParts, fileName, [options])
26
26
functionshowFile(input) {
27
27
let file =input.files[0];
28
28
29
-
alert(`File name: ${file.name}`); // например my.png
30
-
alert(`Last modified: ${file.lastModified}`); // например 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>` можно выбрать несколько файлов, поэтому `input.files` -- массивоподобный объект выбранных файлов. Здесь у нас только один файл, поэтому мы просто берем `input.files[0]`.
36
+
Через `<input>` можно выбрать несколько файлов, поэтому `input.files` -- массивоподобный объект выбранных файлов. Здесь у нас только один файл, поэтому мы просто берём `input.files[0]`.
37
37
```
38
38
39
39
## FileReader
@@ -52,7 +52,7 @@ let reader = new FileReader(); // без аргументов
52
52
53
53
-**`readAsArrayBuffer(blob)`** -- считать данные как `ArrayBuffer`
54
54
-**`readAsText(blob, [encoding])`** -- считать данные как строку (кодировка по умолчанию: `utf-8`)
55
-
-**`readAsDataURL(blob)`** -- считать данные как base64 (data: URL).
55
+
-**`readAsDataURL(blob)`** -- считать данные в формате base64 для URL.
56
56
-**`abort()`** -- отменить операцию.
57
57
58
58
В процессе чтения можно "слушать" следующие события:
@@ -97,10 +97,10 @@ function readFile(input) {
97
97
```smart header="`FileReader` для Blob"
98
98
Как упоминалось в главе <info:blob>, `FileReader` работает для любых объектов Blob, а не только для файлов.
99
99
100
-
Поэтому, мы можем использовать его для преобразования Blob в другой формат:
100
+
Поэтому мы можем использовать его для преобразования Blob в другой формат:
101
101
-`readAsArrayBuffer(blob)` -- в `ArrayBuffer`,
102
102
-`readAsText(blob, [encoding])` -- в строку (альтернатива `TextDecoder`),
103
-
-`readAsDataURL(blob)` -- в base64 (data: URL).
103
+
-`readAsDataURL(blob)` -- в формат base64 для URL.
104
104
```
105
105
106
106
@@ -114,14 +114,14 @@ function readFile(input) {
114
114
115
115
## Итого
116
116
117
-
`File` объекты наследуемые от `Blob`.
117
+
`File` объекты наследуют от `Blob`.
118
118
119
-
Помимо методов и свойств `Blob`, объекты `File` также имеют свойства `fileName` и `lastModified`, плюс внутреннюю возможность чтения из файловой системы. Обычно мы получаем `File` объекты из пользовательского ввода, такого как `<input>` или drag'n'drop.
119
+
Помимо методов и свойств `Blob`, объекты `File` также имеют свойства `fileName` и `lastModified` плюс внутреннюю возможность чтения из файловой системы. Обычно мы получаем `File` объекты из пользовательского ввода, такого как `<input>` или drag'n'drop.
120
120
121
-
Объекты `FileReader` могут читать из файла или Blob, в одном из трех форматов:
121
+
Объекты `FileReader` могут читать из файла или Blob в одном из трех форматов:
122
122
- Строка (`readAsText`).
123
123
-`ArrayBuffer` (`readAsArrayBuffer`).
124
-
-Data: url, c кодировкой base-64 (`readAsDataURL`).
124
+
-Данные в формате base64 для URL (`readAsDataURL`).
125
125
126
-
Однако во многих случаях нам не нужно читать содержимое файла. Как и в случае с Blob, мы можем создать короткий url с помощью `URL.createObjectURL(file)` и назначить его для `<a>` или `<img>`. Таким образом, файл может быть загружен или показан в виде изображения, как часть canvas и т.д.
127
-
И если мы собираемся отправить `File` по сети, это также легко, поскольку сетевой API, такой как `XMLHttpRequest` или `fetch`, изначально принимает объекты `File`.
126
+
Однако, во многих случаях нам не нужно читать содержимое файла. Как и в случае с Blob, мы можем создать короткий url с помощью `URL.createObjectURL(file)` и назначить его для `<a>` или `<img>`. Таким образом, файл может быть загружен или показан в виде изображения, как часть canvas и т.д.
127
+
И если мы собираемся отправить `File` по сети, то это также легко, поскольку сетевой API, такой как `XMLHttpRequest` или `fetch`, изначально принимает объекты `File`.
0 commit comments