FileReader

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

Объекты файлов можно получить из объекта FileList, возвращаемого в результате выбора пользователем файлов с помощью элемента <input type="file">, или из объекта DataTransfer операции перетаскивания. FileReader может получить доступ только к содержимому файлов, которые пользователь явно выбрал; он не может использоваться для чтения файла по пути из файловой системы пользователя. Для чтения файлов в файловой системе клиента по пути используйте API доступа к файловой системе. Для чтения файлов на стороне сервера используйте fetch() с разрешением CORS, если требуется чтение из другого источника.

FileReader()

Возвращает новый объект FileReader.

См. Использование файлов из веб-приложений для получения подробных сведений и примеров.

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

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

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

Число, указывающее состояние FileReader. Оно может принимать следующие значения:

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

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

Содержимое файла. Это свойство становится доступным только после завершения операции чтения, а формат данных зависит от метода, используемого для запуска операции чтения.

FileReader.abort()

Прерывает операцию чтения. По возвращении значение readyState будет DONE.

FileReader.readAsArrayBuffer()

Начинает чтение содержимого указанного Blob, по окончании чтения свойство result содержит объект ArrayBuffer, представляющий данные файла.

FileReader.readAsBinaryString() Устарело

Начинает чтение содержимого указанного Blob, по окончании чтения свойство result содержит исходные двоичные данные файла в виде строки.

FileReader.readAsDataURL()

Начинает чтение содержимого указанного Blob, по окончании чтения свойство result содержит data: URL, представляющий данные файла.

FileReader.readAsText()

Начинает чтение содержимого указанного Blob, по окончании чтения свойство result содержит содержимое файла в виде текстовой строки. Можно указать необязательное имя кодировки.

Присоединяйтесь к этим событиям, используя addEventListener() или назначив обработчик событий свойству oneventname этого интерфейса. Удалите обработчики событий с помощью removeEventListener(), когда FileReader больше не используется, чтобы избежать утечки памяти.

abort

Срабатывает, когда чтение прервано, например, потому что программа вызвала FileReader.abort().

error

Срабатывает, когда чтение завершилось с ошибкой.

load

Срабатывает, когда чтение завершено успешно.

loadend

Срабатывает, когда чтение завершено, успешно или нет.

loadstart

Срабатывает, когда началось чтение.

progress

Срабатывает периодически по мере чтения данных.

В этом примере читается и отображается содержимое текстового файла непосредственно в браузере.

HTML

<h1>File Reader</h1>
<input type="file" id="file-input" />
<div id="message"></div>
<pre id="file-content"></pre>

JavaScript

const fileInput = document.getElementById("file-input");
const fileContentDisplay = document.getElementById("file-content");
const messageDisplay = document.getElementById("message");

fileInput.addEventListener("change", handleFileSelection);

function handleFileSelection(event) {
  const file = event.target.files[0];
  fileContentDisplay.textContent = ""; // Clear previous file content
  messageDisplay.textContent = ""; // Clear previous messages

  // Validate file existence and type
  if (!file) {
    showMessage("No file selected. Please choose a file.", "error");
    return;
  }

  if (!file.type.startsWith("text")) {
    showMessage("Unsupported file type. Please select a text file.", "error");
    return;
  }

  // Read the file
  const reader = new FileReader();
  reader.onload = () => {
    fileContentDisplay.textContent = reader.result;
  };
  reader.onerror = () => {
    showMessage("Error reading the file. Please try again.", "error");
  };
  reader.readAsText(file);
}

// Displays a message to the user
function showMessage(message, type) {
  messageDisplay.textContent = message;
  messageDisplay.style.color = type === "error" ? "red" : "green";
}

• Использование файлов из веб-приложений
• File
• Blob
• FileReaderSync