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
|
---
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">FileReader FileReader();</pre>
<p>Более детально, с примерами см. <a href="/ru/Using_files_from_web_applications" title="ru/Using files from web applications">использование файлов в веб-приложениях</a>.</p>
<h2 id="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">Константы состояния</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">Методы</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>
{{Specifications}}
<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">Смотрите также</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>
|
