Чтение файла в JavaScript: браузер и Node.js

В JavaScript чтение файла зависит от среды. В браузере нельзя просто взять путь вроде C:\file.txt и прочитать его: пользователь должен выбрать файл через <input type="file">, а код читает содержимое через File API. В Node.js файл можно читать с диска через модуль fs

Это два разных сценария, и их не стоит смешивать

Вариант 1: прочитать файл в браузере

Создайте HTML-файл:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Чтение файла</title>
</head>
<body>
  <input id="file" type="file" accept=".txt">
  <pre id="output"></pre>

  <script>
    const input = document.querySelector("#file");
    const output = document.querySelector("#output");

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

      if (!file) {
        output.textContent = "Файл не выбран";
        return;
      }

      const reader = new FileReader();

      reader.addEventListener("load", () => {
        output.textContent = reader.result;
      });

      reader.readAsText(file);
    });
  </script>
</body>
</html>

Откройте страницу в браузере, выберите текстовый файл .txt, и его содержимое появится на странице

Что здесь происходит

input.files[0] берет первый выбранный файл:

const file = input.files[0];

FileReader читает содержимое:

const reader = new FileReader();
reader.readAsText(file);

Событие load срабатывает, когда чтение завершилось:

reader.addEventListener("load", () => {
  output.textContent = reader.result;
});

Браузер делает чтение асинхронным, чтобы страница не зависала во время работы с файлом

Вариант 2: прочитать файл в Node.js

Создайте файл text.txt:

Привет из файла

Создайте read.js:

const fs = require("node:fs");

fs.readFile("text.txt", "utf8", (error, data) => {
  if (error) {
    console.error("Не удалось прочитать файл:", error.message);
    return;
  }

  console.log(data);
});

Запустите:

node read.js

Ожидаемый вывод:

Привет из файла

Node.js подходит для скриптов, серверов и утилит, где код имеет доступ к файловой системе

Вариант с async/await в Node.js

Если вы уже знакомы с async и await, можно читать файл через fs/promises:

const fs = require("node:fs/promises");

async function main() {
  try {
    const data = await fs.readFile("text.txt", "utf8");
    console.log(data);
  } catch (error) {
    console.error("Ошибка чтения:", error.message);
  }
}

main();

Этот вариант часто удобнее в реальных скриптах, потому что код читается сверху вниз. Но для первого знакомства callback-пример тоже полезен: он показывает, что чтение файла не происходит мгновенно

Браузер и Node.js: что выбрать

Частые ошибки

Пытаться читать путь с компьютера в браузере

Такой код не сработает:

fetch("C:/Users/me/file.txt")

Браузер защищает локальные файлы пользователя. Сайт не должен сам читать произвольные файлы с устройства

Забыть, что чтение асинхронное

Результат FileReader доступен после события load, а не сразу после readAsText

Запускать Node.js-код в браузере

require("node:fs") работает в Node.js, но не в обычном браузерном скрипте

Не указывать кодировку

Если в Node.js не указать "utf8", вы можете получить Buffer, а не обычную строку:

fs.readFile("text.txt", (error, data) => {
  console.log(data);
});

Для учебного чтения текста почти всегда пишите:

fs.readFile("text.txt", "utf8", callback);

Мини-задание

Сделайте страницу, которая читает .txt файл и выводит:

• имя файла;
• размер файла;
• первые 100 символов содержимого.

Подсказка:

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

Что почитать дальше по JavaScript

Если нужен общий маршрут по теме, откройте рубрику JavaScript. Для соседних задач пригодятся эти разборы:

• Как запустить JS файл: через браузер и через Node.js
• Учить Джава Скрипт: это как и с чего начать
• JS скрипт: что это и как написать первый script.js
• Как включить JavaScript в браузере: Chrome, Edge, Firefox и Яндекс Браузер