---
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" title="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/" title="http://my.opera.com/desktopteam/blog/2011/04/05/stability-gmail-socks">частичную поддержку</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>