JavaScript Academy · Урок

Чтение файлов с помощью FileReader

Читайте выбранные файлы как текст или URL данных.

«Чтение файлов с помощью FileReader» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что такое FileReader

FileReader — это интерфейс браузера, который асинхронно читает содержимое объектов File и Blob. Вы получаете файл из <input type="file"> и читаете его как текст, адрес данных или двоичные данные.

Получение файла из элемента ввода

Элемент ввода файла предоставляет список files. Первый выбранный файл находится по индексу 0 и имеет полезные свойства, такие как name, size и type.

const input = document.querySelector('#picker');
const file = input.files[0];

console.log(file.name);
console.log(file.size);
console.log(file.type);

Чтение выполняется асинхронно

FileReader не возвращает данные напрямую. Подключите обработчик onload, а затем вызовите метод чтения. Результат появится позже в reader.result.

const reader = new FileReader();
reader.onload = function () {
  console.log('done reading');
  console.log(reader.result);
};
reader.readAsText(file);

readAsText

readAsText декодирует файл в текстовую строку. Этот метод идеально подходит для текстовых файлов, файлов с данными, разделёнными запятыми, или файлов в формате обмена данными.

const reader = new FileReader();
reader.onload = () => {
  console.log('contents:', reader.result);
};
reader.readAsText(textFile);

readAsDataURL

readAsDataURL создаёт адрес данных в кодировке с основанием 64: data:. Это идеально подходит для предварительного просмотра изображения: достаточно присвоить результат свойству img.src.

const reader = new FileReader();
reader.onload = () => {
  const img = document.querySelector('#preview');
  img.src = reader.result;
  console.log(reader.result.slice(0, 30));
};
reader.readAsDataURL(imageFile);

readAsArrayBuffer

readAsArrayBuffer возвращает необработанные двоичные данные в виде ArrayBuffer, что удобно для разбора форматов файлов побайтно.

const reader = new FileReader();
reader.onload = () => {
  const bytes = new Uint8Array(reader.result);
  console.log('byte count:', bytes.length);
  console.log('first byte:', bytes[0]);
};
reader.readAsArrayBuffer(binaryFile);

Обработка ошибок

Подключите обработчик onerror, чтобы перехватывать сбои чтения, например если файл невозможно прочитать.

const reader = new FileReader();
reader.onerror = () => {
  console.log('read failed:', reader.error.name);
};
reader.onload = () => console.log('ok');
reader.readAsText(file);

Отслеживание хода выполнения

Для больших файлов событие onprogress сообщает, сколько байтов уже загружено. Это удобно для индикаторов выполнения.

const reader = new FileReader();
reader.onprogress = (event) => {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    console.log('loaded ' + percent.toFixed(0) + '%');
  }
};
reader.readAsArrayBuffer(bigFile);

Обернуть в обещание

API на основе событий неудобен. Оберните его в обещание, чтобы использовать await и писать более понятный код.

function readText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file);
  });
}

readText(file).then(text => console.log(text));

Современная альтернатива: file.text()

Современные браузеры позволяют напрямую вызвать file.text(), file.arrayBuffer() или file.stream(), возвращающие обещания. Во многих случаях они проще, чем FileReader.

async function show(file) {
  const text = await file.text();
  console.log(text);
}

show(file);

Зачем нужен FileReader

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

const reader = new FileReader();
reader.onload = () => console.log('ready to upload');
reader.readAsDataURL(file);

Быстрая проверка

Какой метод FileReader возвращает строку в кодировке с основанием 64, подходящую для предварительного просмотра изображения через src?

Повторение: чтение файлов

Вы научились читать содержимое файлов:

Получайте файлы из input.files; чтение выполняется асинхронно через onload.
readAsText, readAsDataURL и readAsArrayBuffer возвращают данные в разных форматах.
Для надёжности обрабатывайте onerror и onprogress.
Современные методы file.text() и file.arrayBuffer() являются альтернативами на основе обещаний.

Часто задаваемые вопросы

Урок «Чтение файлов с помощью FileReader» бесплатный?

Да — полный текст урока «Чтение файлов с помощью FileReader» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Чтение файлов с помощью FileReader»?

Читайте выбранные файлы как текст или URL данных. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Чтение файлов с помощью FileReader»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy