Эта страница была переведена с английского языка силами сообщества. Вы тоже можете внести свой вклад, присоединившись к русскоязычному сообществу MDN Web Docs.

FileReader

Общая информация

Объект FileReader позволяет веб-приложениям асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя, используя объекты File или Blob, с помощью которых задаётся файл или данные для чтения.

Объекты File можно получить через объект FileList, который возвращается как результат при выборе файлов пользователем с помощью элемента <input>, через drag and drop из объекта DataTransfer, или с помощью mozGetAsFile(), метода доступного в API элемента HTMLCanvasElement.

Важное замечание: FileReader используется только для безопасным образом чтения содержимого файла из пользовательской (удалённой) системы. Его нельзя использовать для простого чтения файла по пути из файловой системы. Для чтения файла по пути в JavaScript следует использовать стандартное решение Ajax для чтения файла на стороне сервера с разрешение CORS при кроссдоменном чтении.

Примечание: Эта возможность доступна в Web Workers

Конструктор

FileReader FileReader();

Более детально, с примерами см. использование файлов в веб-приложениях.

Свойства

FileReader.error Только для чтения
DOMError (en-US) представляет собой ошибку, происходящую при чтении файла.
FileReader.readyState (en-US) Только для чтения
Число обозначающее состояние объекта FileReader. Принимает одно из значений State constants.
FileReader.result (en-US) Только для чтения
Данные из файла. Значение свойства действительно только когда завершится операция чтения, причём формат данных зависит от способа, с помощью которого процесс был вызван.

Обработка событий

FileReader.onabort
Обработчик для события abort (en-US). Это событие срабатывает каждый раз, когда прерывается операция чтения.
FileReader.onerror (en-US)
Обработчик для события error (en-US). Это событие срабатывает каждый раз, когда при чтении возникает ошибка.
FileReader.onload (en-US)
Обработчик для события load (en-US). Это событие срабатывает при каждом успешном завершении операции чтения.
FileReader.onloadstart
Обработчик для события loadstart (en-US). Это событие срабатывает каждый раз, при запуске процесса чтения.
FileReader.onloadend
Обработчик для события loadend (en-US). Это событие срабатывает каждый раз по окончании процесса чтения (не важно, успешном или нет).
FileReader.onprogress
Обработчик для события progress (en-US). Это событие срабатывает во время чтения данных из Blob.

Замечание: т.к. FileReader унаследован от EventTarget, на все перечисленные события можно подписаться, используя метод addEventListener.

Константы состояния

  • EMPTY : 0 : Данные ещё не были загружены.
  • LOADING : 1 : Данные в данный момент загружаются.
  • DONE : 2 : Операция чтения была завершена.

Методы

FileReader.abort() (en-US)
Отмена операции чтения. После вызова, значение readyState станет равным DONE.
FileReader.readAsArrayBuffer()
Запускает процесс чтения данных указанного Blob, по завершении, атрибут result будет содержать данные файла в виде ArrayBuffer.
FileReader.readAsBinaryString()
Запускает процесс чтения данных указанного Blob, по завершении, атрибут result будет содержать бинарные данные файла в виде строки.
FileReader.readAsDataURL()
Запускает процесс чтения данных указанного Blob, по завершении, атрибут result будет содержать данные файла в виде data: URL.
FileReader.readAsText()
Запускает процесс чтения данных указанного Blob, по завершении, атрибут result будет содержать данные файла в виде текста.

Спецификация

Specification
File API
# APIASynch

Поддержка браузерами

BCD tables only load in the browser

Примечания по реализации

Относительно движка Gecko

  • В версиях Gecko ниже 2.0 beta 7 (Firefox 4.0 beta 7), все параметры Blob были параметрами File; в последствии это было изменено, для соответствия спецификации.
  • В версиях Gecko ниже 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) свойство FileReader.error возвращало объект FileError. Этот интерфейс был упразднён и теперь свойство FileReader.error возвращает объект DOMError (en-US), что соответствует определению FileAPI последней спецификации.

Смотрите также