JavaScript: File и FileReader

В современной веб-разработке эффективное и безопасное управление файлами имеет решающее значение. JavaScript, играющий ключевую роль в клиентском скриптинге, предоставляет мощные инструменты через интерфейсы File и FileReader. Это руководство подробно рассматривает эти инструменты, давая разработчикам навыки для плавной работы с файлами в веб-приложениях.

Понимание интерфейса File в JavaScript

Интерфейс File в JavaScript представляет собой объект, содержащий данные файла. Файлы обычно поступают из элементов <input type="file">, операций Drag and Drop или Clipboard API. Этот интерфейс предоставляет стандартную информацию, такую как имя, размер и MIME-тип, а также методы для доступа к содержимому файла.

Основные свойства интерфейса File

• name: Имя файла в виде строки.
• size: Размер файла в байтах.
• type: MIME-тип файла в виде строки.

Пример: Отображение информации о файле

Вот простой способ отображения информации о файле, выбранном пользователем:

---

<input type="file" id="fileInput" />
<div id="fileInfo"></div>

document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const info = `File Name: ${file.name} <br> File Size: ${file.size} bytes<br> File Type: ${file.type}`;
  document.getElementById('fileInfo').innerHTML = info;
});

Try it Yourself »

Использование API FileReader

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

Методы FileReader

• readAsDataURL(): Читает файл как data URL.
• readAsText(): Читает файл как текст.
• readAsArrayBuffer(): Читает файл как ArrayBuffer.

Пример: Чтение текстового файла

Следующий пример демонстрирует чтение текстового файла с помощью FileReader и отображение его содержимого на веб-странице:

---

<input type="file" id="textInput" />
<div id="textOutput">Upload a text file please</div>

document.getElementById('textInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('textOutput').innerHTML = e.target.result;
  };
  reader.onerror = function() {
    document.getElementById('textOutput').innerHTML = 'Error reading file.';
  };
  reader.readAsText(file);
});

Try it Yourself »

Продвинутое чтение файлов: работа с различными типами данных

Чтение изображений как Data URL

Чтобы отобразить файл изображения, выбранный пользователем, вы можете прочитать его как Data URL с помощью метода readAsDataURL. Этот метод кодирует файл в строку base64, которую можно напрямую использовать в элементах изображения.

Пример: Отображение изображения

---

<input type="file" id="imageInput" />
<div>Select an image file, please.</div>
<img id="imageDisplay" />

document.getElementById('imageInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('imageDisplay').src = e.target.result;
  };
  reader.onerror = function() {
    document.getElementById('imageDisplay').style.display = 'none';
    alert('Error reading image file.');
  };
  reader.readAsDataURL(file);
});

Try it Yourself »

Чтение бинарных файлов с помощью ArrayBuffer

Для приложений, которым необходимо обрабатывать аудио, видео или любые бинарные данные, чтение файла как ArrayBuffer является обязательным. Этот метод предоставляет универсальный буфер бинарных данных, который можно обрабатывать или передавать другим API, таким как Web Audio или WebGL.

Пример: Обработка бинарных данных

---

<input type="file" id="binaryInput" />
<div id="binaryOutput">Select any file.</div>

document.getElementById('binaryInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    const buffer = e.target.result;
    // Process the binary data
    const info = `Buffer Length: ${buffer.byteLength} bytes`;
    document.getElementById('binaryOutput').innerHTML = info;
  };
  reader.onerror = function() {
    document.getElementById('binaryOutput').innerHTML = 'Error reading binary file.';
  };
  reader.readAsArrayBuffer(file);
});

Try it Yourself »

Заключение

Понимая и внедряя интерфейсы File и FileReader в JavaScript, разработчики могут улучшить взаимодействие своих веб-приложений с данными пользователей. Эти API предоставляют необходимые инструменты для обработки ввода файлов, чтения содержимого файлов и эффективного использования данных, обеспечивая более богатый и интерактивный пользовательский опыт.

Примечание: Современные браузеры также поддерживают file.text() и file.arrayBuffer() для более простого асинхронного чтения без использования API FileReader.

Практика

Каковы возможности интерфейсов File и FileReader в JavaScript?

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