API файлов

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

Веб-приложения могут получить доступ к файлам, когда пользователь предоставляет их, используя элемент ввода файла <input> или через перетаскивание.

Наборы файлов, предоставленные таким образом, представляются как объекты FileList, которые позволяют веб-приложению извлекать отдельные объекты File. В свою очередь, объекты File предоставляют доступ к метаданным, таким как имя файла, размер, тип и дата последнего изменения.

Объекты File могут передаваться объектам FileReader для доступа к содержимому файла. Интерфейс FileReader является асинхронным, но синхронная версия, доступная только в веб-воркерах, предоставляется интерфейсом FileReaderSync.

Blob

Представляет собой "Большой двоичный объект", то есть похожий на файл объект неизменяемых, исходных данных; объект Blob может быть прочитан как текст или двоичные данные, или преобразован в ReadableStream, чтобы его методы могли использоваться для обработки данных.

File

Предоставляет информацию о файле и позволяет JavaScript на веб-странице получить доступ к его содержимому.

FileList

Возвращается свойством files элемента HTML <input>; это позволяет получить доступ к списку выбранных файлов с помощью элемента <input type="file">. Также используется для списка файлов, перетащенных на веб-содержимое при использовании API перетаскивания; см. объект DataTransfer для подробностей об этом использовании.

FileReader

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

FileReaderSync

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

URL.createObjectURL()

Создаёт URL, который может быть использован для получения объекта File или Blob.

URL.revokeObjectURL()

Освобождает существующий URL объекта, который был ранее создан вызовом URL.createObjectURL().

В этом примере мы предоставляем элемент ввода файла <input>, и когда пользователь выбирает файл, мы читаем содержимое первого выбранного файла в виде текста и отображаем результат в элементе <div>.

HTML

<input type="file" />
<div class="output"></div>

CSS

.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}

JavaScript

const fileInput = document.querySelector("input[type=file]");
const output = document.querySelector(".output");

fileInput.addEventListener("change", async () => {
  const [file] = fileInput.files;

  if (file) {
    output.innerText = await file.text();
  }
});

• <input type="file">: элемент ввода файла
• Blob.text()
• Интерфейс DataTransfer