1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: FileReader
slug: Web/API/FileReader
tags:
- API
- DOM
- File API
- WebAPI
- Файлы
translation_of: Web/API/FileReader
---
<p>{{ APIRef("File API") }}</p>
<h2 id="Общая_информация">Общая информация</h2>
<p>Объект <code>FileReader</code> позволяет веб-приложениям асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя, используя объекты {{domxref("File")}} или {{domxref("Blob")}}, с помощью которых задаётся файл или данные для чтения.</p>
<p>Объекты <code>File</code> можно получить через объект {{domxref("FileList")}}, который возвращается как результат при выборе файлов пользователем с помощью элемента {{HTMLElement("input")}}, через drag and drop из объекта {{domxref("DataTransfer")}}, или с помощью <code>mozGetAsFile()</code>, метода доступного в API элемента {{domxref("HTMLCanvasElement")}}.</p>
<div class="blockIndicator warning">
<p>Важное замечание: <code>FileReader</code> используется только для безопасным образом чтения содержимого файла из пользовательской (удалённой) системы. Его нельзя использовать для простого чтения файла по пути из файловой системы. Для чтения файла по пути в JavaScript следует использовать стандартное решение Ajax для чтения файла на стороне сервера с разрешение CORS при кроссдоменном чтении.</p>
</div>
<p>{{AvailableInWorkers}}</p>
<h2 id="Конструктор">Конструктор</h2>
<pre class="syntaxbox notranslate">FileReader FileReader();</pre>
<p>Более детально, с примерами см. <a href="/ru/Using_files_from_web_applications" title="ru/Using files from web applications">использование файлов в веб-приложениях</a>.</p>
<h2 id="Properties" name="Properties">Свойства</h2>
<dl>
<dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
<dd>{{domxref("DOMError")}} представляет собой ошибку, происходящую при чтении файла.</dd>
<dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
<dd>Число обозначающее состояние объекта <code>FileReader</code>. Принимает одно из значений {{ anch("State constants") }}.</dd>
<dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
<dd>Данные из файла. Значение свойства действительно только когда завершится операция чтения, причём формат данных зависит от способа, с помощью которого процесс был вызван.</dd>
</dl>
<h3 id="Обработка_событий">Обработка событий</h3>
<dl>
<dt>{{domxref("FileReader.onabort")}}</dt>
<dd>Обработчик для события {{event("abort")}}. Это событие срабатывает каждый раз, когда прерывается операция чтения.</dd>
<dt>{{domxref("FileReader.onerror")}}</dt>
<dd>Обработчик для события {{event("error")}}. Это событие срабатывает каждый раз, когда при чтении возникает ошибка.</dd>
<dt>{{domxref("FileReader.onload")}}</dt>
<dd>Обработчик для события {{event("load")}}. Это событие срабатывает при каждом успешном завершении операции чтения.</dd>
<dt>{{domxref("FileReader.onloadstart")}}</dt>
<dd>Обработчик для события {{event("loadstart")}}. Это событие срабатывает каждый раз, при запуске процесса чтения.</dd>
<dt>{{domxref("FileReader.onloadend")}}</dt>
<dd>Обработчик для события {{event("loadend")}}. Это событие срабатывает каждый раз по окончании процесса чтения (не важно, успешном или нет).</dd>
<dt>{{domxref("FileReader.onprogress")}}</dt>
<dd>Обработчик для события {{event("progress")}}. Это событие срабатывает во время чтения данных из {{domxref("Blob")}}.</dd>
</dl>
<div class="note">
<p>Замечание: т.к. <code>FileReader</code> унаследован от {{domxref("EventTarget")}}, на все перечисленные события можно подписаться, используя метод {{domxref("EventTarget.addEventListener()","addEventListener")}}.</p>
</div>
<h3 id="State_constants" name="State_constants">Константы состояния</h3>
<ul>
<li><code>EMPTY </code> : <code>0</code> : Данные ещё не были загружены.</li>
<li><code>LOADING</code> : <code>1</code> : Данные в данный момент загружаются.</li>
<li><code>DONE </code> : <code>2</code> : Операция чтения была завершена.</li>
</ul>
<h2 id="Methods" name="Methods">Методы</h2>
<dl>
<dt>{{domxref("FileReader.abort()")}}</dt>
<dd>Отмена операции чтения. После вызова, значение <code>readyState</code> станет равным <code>DONE</code>.</dd>
<dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}</dt>
<dd>Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, атрибут <code>result</code> будет содержать данные файла в виде {{domxref("ArrayBuffer")}}.</dd>
<dt>{{domxref("FileReader.readAsBinaryString()")}}</dt>
<dd>Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, атрибут <code style="font-style: normal;">result</code> будет содержать бинарные данные файла в виде строки.</dd>
<dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
<dd>Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, атрибут <code style="font-style: normal;">result</code> будет содержать данные файла в виде <code>data:</code> URL.</dd>
<dt>{{domxref("FileReader.readAsText()")}}</dt>
<dd>Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, атрибут <code style="font-style: normal;">result</code> будет содержать данные файла в виде текста.</dd>
</dl>
<h2 id="Спецификация">Спецификация</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
<tr>
<td>{{SpecName('File API','#FileReader-interface','FileReader')}}</td>
<td>{{Spec2('File API')}}</td>
<td>Начальное определение.</td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat("api.FileReader")}}</p>
<div id="compat-mobile"></div>
<h3 id="Примечания_по_реализации">Примечания по реализации</h3>
<ul>
<li>Для IE9 есть <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</li>
<li>Opera предоставляет <a href="http://www.opera.com/docs/specs/presto28/file/">частичную поддержку</a> в версии 11.1.</li>
</ul>
<h4 id="Относительно_движка_Gecko">Относительно движка Gecko</h4>
<ul>
<li>В версиях Gecko ниже 2.0 beta 7 (Firefox 4.0 beta 7), все параметры {{ domxref("Blob") }} были параметрами {{ domxref("File") }}; в последствии это было изменено, для соответствия спецификации.</li>
<li>В версиях Gecko ниже 13.0 {{ geckoRelease("13.0") }} свойство <code>FileReader.error</code> возвращало объект {{ domxref("FileError") }}. Этот интерфейс был упразднён и теперь свойство <code>FileReader.error</code> возвращает объект {{ domxref("DOMError") }}, что соответствует определению FileAPI последней спецификации.</li>
</ul>
<h2 id="See_also" name="See_also">Смотрите также</h2>
<ul>
<li><a href="/ru/Using_files_from_web_applications" title="ru/Using files from web applications">Использование файлов в веб-приложениях</a></li>
<li>{{ domxref("File") }}</li>
<li>{{ domxref("Blob") }}</li>
<li><a href="/ru/docs/nsIDOMFileReader">nsIDOMFileReader</a> - <span style="background-color: #ffffff; color: #4d4e53; font-family: open sans,arial,sans-serif; font-size: 14px; line-height: 21px;">For addons/privileged scope</span></li>
</ul>
|
