FileReader

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

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

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

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

Конструктор

FileReader FileReader();

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

Свойства

FileReader.error Только для чтения

DOMError представляет собой ошибку, происходящую при чтении файла.

FileReader.readyState Только для чтения

Число обозначающее состояние объекта FileReader. Принимает одно из значений State constants.

FileReader.result Только для чтения

Данные из файла. Значение свойства действительно только когда завершится операция чтения, причём формат данных зависит от способа, с помощью которого процесс был вызван.

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

FileReader.onabort

Обработчик события abort. Это событие возникает каждый раз, когда прерывается операция чтения.

FileReader.onerror

Обработчик события error. Это событие возникает каждый раз, когда при чтении возникает ошибка.

FileReader.onload

Обработчик события load. Это событие возникает при каждом успешном завершении операции чтения.

FileReader.onloadstart

Обработчик события loadstart. Это событие возникает каждый раз, при запуске процесса чтения.

FileReader.onloadend

Обработчик события loadend. Это событие возникает каждый раз по окончании процесса чтения (не важно, успешном или нет).

FileReader.onprogress

Обработчик события progress. Это событие возникает во время чтения данных из Blob.

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

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

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

Методы

FileReader.abort()

Отмена операции чтения. После вызова, значение 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

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
FileReader
FileReader() constructor
abort
abort event
error
error event
load event
loadend event
loadstart event
progress event
readAsArrayBuffer
readAsBinaryString
Deprecated
readAsDataURL
readAsText
readyState
result
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Deprecated. Not for use in new websites.
See implementation notes.
Has more compatibility info.

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

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

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

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