--- 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}}</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>