FileReader.readAsText: примеры (JAVASCRIPT)

Простые примеры использования

Чтение текстового файла с кодировкой по умолчанию (UTF-8).

<input type='file' id='fileInput' />
<pre id='output'></pre>

<script>
  document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();

    reader.onload = function(e) {
      document.getElementById('output').textContent = e.target.result;
    };

    reader.onerror = function() {
      console.error('Ошибка чтения файла');
    };

    reader.readAsText(file); // Используется кодировка по умолчанию
  });
</script>

При выборе файла example.txt с содержимым Привет, мир! результат будет:

Привет, мир!

Чтение файла с явным указанием кодировки.

// Предположим, файл создан в кодировке windows-1251
const russianText = 'Тестовый текст';
const blob = new Blob([new Uint8Array([0xD2, 0xE5, 0xF1, 0xF2])], { type: 'text/plain' }); // Упрощенный пример байтов
const reader = new FileReader();

reader.onload = function(e) {
  console.log(e.target.result);
};

reader.readAsText(blob, 'windows-1251');

Если браузер поддерживает указанную кодировку и байты соответствуют тексту 'Тест', в консоли может отобразиться:

Тест

Альтернативные методы чтения в JavaScript

FileReader.readAsArrayBuffer(): Читает содержимое файла как ArrayBuffer. Полезно для обработки бинарных данных, например, изображений или аудиофайлов, перед загрузкой на сервер или анализом.

FileReader.readAsDataURL(): Возвращает данные в формате Data URL (строка base64). Часто используется для предварительного просмотра изображений, выбранных пользователем, без загрузки на сервер.

FileReader.readAsBinaryString() (устаревший): Читает файл как бинарную строку, где каждый байт представлен символом в диапазоне 0-255. Не рекомендуется для новых проектов.

Blob.text(): Современная альтернатива, возвращающая Promise. Проще в использовании, не требует создания экземпляра FileReader и работы с событиями. Предпочтительна в новом коде, если не требуется отслеживание прогресса.

// Пример с Blob.text()
const blob = new Blob(['Текст из Blob']);
async function readBlob() {
  const text = await blob.text();
  console.log(text); // 'Текст из Blob'
}
readBlob();

Аналоги в других языках программирования

Python: Используется встроенная функция open() с указанием режима чтения текста и кодировки. Чтение синхронное, но для асинхронных операций можно использовать aiofiles.

# Синхронное чтение
with open('file.txt', 'r', encoding='utf-8') as f:
    content = f.read()
print(content)

Содержимое файла file.txt

PHP: Функция file_get_contents() читает весь файл в строку. Может использоваться с контекстом потоков.

<?php
$content = file_get_contents('file.txt');
echo $content;
?>

Содержимое файла file.txt

C#: Класс StreamReader из пространства имен System.IO предоставляет методы для чтения текстовых файлов с указанием кодировки.

using System.IO;
using System.Text;

string content = File.ReadAllText("file.txt", Encoding.UTF8);
Console.WriteLine(content);

Содержимое файла file.txt

Отличия от JavaScript: В серверных языках чтение обычно происходит напрямую из файловой системы по пути, а в браузерном JavaScript - только из объектов File/Blob, предоставленных пользователем или сгенерированных в коде, без прямого доступа к файловой системе.

Распространенные ошибки

1. Попытка чтения до выбора файла: Обращение к files[0] когда список пуст.

// Неправильно: нет проверки на наличие файла
const file = document.getElementById('fileInput').files[0];
const reader = new FileReader();
reader.readAsText(file); // file будет undefined, ошибка

2. Неправильное использование результата до завершения чтения: Чтение асинхронное, результат доступен только в обработчике события load.

const reader = new FileReader();
reader.readAsText(someFile);
console.log(reader.result); // null, так как чтение еще не завершено

3. Игнорирование ошибок и отмены: Отсутствие обработчиков событий error и abort может затруднить отладку.

reader.onload = function(e) { /* успех */ };
reader.onerror = function(e) {
  console.error('Код ошибки:', reader.error.code);
};
// Если пользователь отменит чтение или файл недоступен, ошибка будет обработана

4. Попытка повторного использования FileReader: После начала чтения экземпляр FileReader не должен использоваться для других операций, пока текущая не завершена. Нужно создавать новый экземпляр для каждого файла или использовать reader.onloadend для сброса.

Изменения и современные альтернативы

Сам метод readAsText() не претерпел значительных изменений в спецификации. Основное развитие связано с появлением более удобных API, которые его дополняют или заменяют.

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

Также, с развитием Streams API появилась возможность поточного чтения файлов через file.stream(), что эффективно для обработки больших файлов без загрузки всего содержимого в память.

// Современный подход с async/await и Blob.text()
async function handleFile(file) {
  try {
    const text = await file.text();
    console.log(text);
  } catch (err) {
    console.error(err);
  }
}
// Или с использованием Streams для больших файлов
async function streamFile(file) {
  const stream = file.stream();
  const reader = stream.getReader();
  // ... поточное чтение чанков
}

Расширенные примеры применения

1. Чтение и обработка CSV файла с разбивкой на строки и колонки.

function parseCSV(text) {
  const lines = text.split('\n');
  return lines.map(line => line.split(','));
}

const reader = new FileReader();
reader.onload = function(e) {
  const data = parseCSV(e.target.result);
  console.log('CSV данные:', data);
};
reader.readAsText(csvFile);

Для файла с содержимым:

Имя,Возраст,Город
Анна,25,Москва
Иван,30,Санкт-Петербург

Результат в консоли будет массив массивов.

2. Чтение нескольких файлов последовательно с использованием замыканий.

function readFilesSequentially(files) {
  let index = 0;
  const contents = [];

  function readNext() {
    if (index >= files.length) {
      console.log('Все файлы прочитаны:', contents);
      return;
    }
    const reader = new FileReader();
    reader.onload = function(e) {
      contents.push(e.target.result);
      index++;
      readNext();
    };
    reader.readAsText(files[index]);
  }
  readNext();
}
// Вызов для массива File объектов

3. Чтение файла с отслеживанием прогресса.

const reader = new FileReader();
reader.onprogress = function(e) {
  if (e.lengthComputable) {
    const percentLoaded = Math.round((e.loaded / e.total) * 100);
    console.log(`Загружено: ${percentLoaded}%`);
  }
};
reader.onload = function(e) {
  console.log('Чтение завершено');
};
reader.readAsText(largeFile);

4. Автоматическое определение кодировки с использованием библиотеки или анализа BOM (Byte Order Mark).

// Упрощенный пример: проверка на UTF-8 BOM
function readWithBOM(file) {
  const reader = new FileReader();
  reader.onload = function(e) {
    let text = e.target.result;
    if (text.charCodeAt(0) === 0xFEFF) {
      text = text.substring(1); // Удаляем BOM
    }
    console.log(text);
  };
  reader.readAsText(file, 'UTF-8'); // Чтение с UTF-8, включая возможный BOM
}

5. Использование с Drag and Drop интерфейсом.

dropZone.addEventListener('drop', function(e) {
  e.preventDefault();
  const file = e.dataTransfer.files[0];
  if (file && file.type === 'text/plain') {
    const reader = new FileReader();
    reader.onload = function(event) {
      dropZone.textContent = event.target.result;
    };
    reader.readAsText(file);
  }
});