Загрузка файлов JavaScript: как читать содержимое файла

Упростите чтение содержимого файлов на вашем веб-сайте с помощью этих простых советов.

Загрузка файлов — это обычная функция веб-приложений, позволяющая пользователям загружать различные типы файлов, например документы, изображения и видео. Когда пользователь загружает файл, его содержимое должно быть прочитано серверным приложением для обработки. В этой статье мы рассмотрим, как читать содержимое файла в JavaScript, когда файл загружается пользователем.

FileReader

API FileReader API FileReader — это API JavaScript, предоставляющий способ асинхронного чтения содержимого файлов. Его можно использовать для чтения файлов, выбранных пользователем с помощью элемента управления вводом файлов или операции перетаскивания. API FileReader работает, создавая объект FileReader и вызывая его метод readAsText или readAsArrayBuffer для чтения содержимого файла.

Чтобы использовать API FileReader, нам нужно создать новый экземпляр объекта FileReader и вызвать его методы для чтения содержимого файла. Вот пример того, как использовать API FileReader для чтения содержимого файла, выбранного пользователем с помощью элемента управления вводом файла:

<input type="file" id="file-input" onchange="handleFileSelect()">

function handleFileSelect() {
  const input = document.getElementById('file-input');
  const file = input.files[0];
  const reader = new FileReader();
  reader.onload = function() {
    const contents = reader.result;
    // Process the contents of the file
  };
  reader.readAsText(file);
}

В приведенном выше примере мы сначала получаем ссылку на элемент управления вводом файла и получаем выбранный файл из его свойства files. Затем мы создаем новый экземпляр объекта FileReader и устанавливаем для его обработчика события onload функцию, которая будет вызываться при загрузке содержимого файла. Наконец, мы вызываем метод readAsText объекта FileReader, чтобы инициировать чтение содержимого файла.

После загрузки содержимого файла вызывается обработчик события onload, и к содержимому файла можно получить доступ через свойство результата объекта FileReader.

Чтение больших файлов

Чтение больших файлов может быть сложной задачей в JavaScript, так как это может привести к проблемам с производительностью и потенциальным утечкам памяти. Чтобы избежать этих проблем, мы можем использовать метод slice объекта File для чтения содержимого файла по частям.

Вот пример того, как использовать метод slice для чтения большого файла по частям:

function readChunk(file, start, end, callback) {
  const reader = new FileReader();
  const blob = file.slice(start, end);

  reader.onload = function() {
      const contents = reader.result;
      callback(contents);
    };
    reader.readAsText(blob);
}

function readLargeFile(file, chunkSize, callback) {
  let start = 0;
  let end = Math.min(chunkSize, file.size);
  function readNextChunk() {
    readChunk(file, start, end, function(contents) {
      callback(contents);
      if (end < file.size) {
        start = end;
        end = Math.min(start + chunkSize, file.size);
        readNextChunk();
      }
    });
  }
  readNextChunk();
}

В приведенном выше примере мы сначала определяем функцию readChunk, которая считывает фрагмент файла, используя метод slice объекта File. Затем мы определяем функцию readLargeFile, которая считывает файл порциями, вызывая функцию readChunk несколько раз, пока не будет прочитан весь файл. Параметр chunkSize определяет размер каждого фрагмента, который будет прочитан.

Заключение

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

Спасибо за чтение, надеюсь поймать вас в следующей статье.

Не являетесь участником Medium? Поддержите меня здесь, став одним из них.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .