Открытие файлов через JavaScript: практические решения

Раздел: Веб-разработка -> Файловые операции

Способы чтения файлов в JavaScript

Как прочитать содержимое локального текстового файла с помощью элемента input?

Наиболее распространённый способ в веб-разработке - использование элемента <input type='file'> и объекта FileReader. Пользователь выбирает файл через диалоговое окно, и JavaScript считывает его содержимое.


// HTML
<input type='file' id='fileInput' accept='.txt,.js'>
<pre id='output'></pre>

// JavaScript
const input = document.getElementById('fileInput');
const output = document.getElementById('output');

input.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (!file) return;
  
  const reader = new FileReader();
  
  reader.onload = function(e) {
    output.textContent = e.target.result;
  };
  
  reader.onerror = function() {
    output.textContent = 'Ошибка чтения файла';
  };
  
  reader.readAsText(file);
});

открыть js (открытие файлов javascript)

Этот код подходит для небольших текстовых файлов (до нескольких мегабайт). Метод readAsText возвращает строку в кодировке UTF-8 по умолчанию.

Возможные проблемы:

  • Файл слишком большой - браузер может зависнуть. Рекомендуется ограничение размера.
  • Неправильная кодировка - можно задать второй аргумент readAsText(file, 'windows-1251').
  • Пользователь отменил выбор - рекомендуется проверять files.length.

Как обработать файл, перетащенный на страницу (drag and drop)?

Вместо элемента input можно использовать события dragover и drop. Файл передаётся через объект DataTransfer.


const dropZone = document.getElementById('dropZone');

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropZone.style.borderColor = 'blue';
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  const file = e.dataTransfer.files[0];
  if (!file) return;
  
  const reader = new FileReader();
  reader.onload = (event) => {
    document.getElementById('output').textContent = event.target.result;
  };
  reader.readAsText(file);
});

Типичная ошибка:

Необходимо вызывать e.preventDefault() на обоих событиях, иначе браузер откроет файл вместо обработки.

Как загрузить и прочитать удалённый файл (из сети)?

Если файл находится на сервере, используется Fetch API или XMLHttpRequest. Ответ можно преобразовать в текст, Blob или ArrayBuffer.


fetch('https://example.com/script.js')
  .then(response => {
    if (!response.ok) throw new Error('Ошибка загрузки');
    return response.text();
  })
  .then(text => console.log(text))
  .catch(error => console.error(error));

Проблема CORS:

Если сервер не разрешает кросс-доменные запросы, браузер заблокирует загрузку. Решение - настроить сервер или использовать прокси.

Как читать бинарные файлы (изображения, ZIP, видео) в JavaScript?

Для бинарных данных применяется readAsArrayBuffer или readAsDataURL. Например, для отображения изображения подходит readAsDataURL.


const input = document.getElementById('fileInput');
const img = document.getElementById('image');

input.addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;
  
  const reader = new FileReader();
  reader.onload = function(event) {
    img.src = event.target.result; // data: URL
  };
  reader.readAsDataURL(file);
});

Для работы с бинарными данными можно получить ArrayBuffer и использовать DataView.

Ошибка:

Применение readAsText для бинарного файла приведёт к искажению данных.

Как читать файлы на сервере с помощью Node.js?

На серверной стороне JavaScript (Node.js) используется модуль fs. Доступно синхронное или асинхронное чтение.


const fs = require('fs');

// Асинхронное чтение
fs.readFile('file.txt', 'utf8', (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(data);
});

// Синхронное чтение (блокирует поток)
const data = fs.readFileSync('file.txt', 'utf8');
console.log(data);

Проблема:

Синхронное чтение блокирует Event Loop, поэтому не рекомендуется для продакшена. Лучше применять асинхронные версии или промисы через fs.promises.

Расширенные примеры работы с файлами

Чтение нескольких файлов одновременно

Атрибут multiple даёт возможность выбирать несколько файлов в одном элементе input. Каждый файл обрабатывается в цикле.

Пример 

<input type='file' id='multiFiles' multiple>
<ul id='fileList'></ul>

const inputMulti = document.getElementById('multiFiles');
const list = document.getElementById('fileList');

inputMulti.addEventListener('change', function() {
  list.innerHTML = '';
  Array.from(this.files).forEach(file => {
    const reader = new FileReader();
    reader.onload = function(e) {
      const li = document.createElement('li');
      li.textContent = file.name + ': ' + e.target.result.substring(0, 50) + '...';
      list.appendChild(li);
    };
    reader.readAsText(file);
  });
});
  
// Результат: список файлов с первыми 50 символами содержимого каждого.

Чтение JSON файла и вывод в консоль объектов

После чтения текста файла можно применить JSON.parse для преобразования в объект.

Пример 

input.addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file || !file.name.endsWith('.json')) return;
  
  const reader = new FileReader();
  reader.onload = function(event) {
    try {
      const data = JSON.parse(event.target.result);
      console.log('Объект:', data);
    } catch (err) {
      console.error('Некорректный JSON:', err);
    }
  };
  reader.readAsText(file);
});
  
// Если file.json содержит {"name":"test","version":1}, то в консоли: Объект: {name: "test", version: 1}

Чтение файла как ArrayBuffer и создание типизированного массива

Этот подход полезен для бинарных форматов, например, для анализа заголовков PNG.

Пример 

input.addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = function(event) {
    const buffer = event.target.result;  // ArrayBuffer
    const view = new DataView(buffer);
    // Чтение первых 4 байт как 32-битное целое
    const first4 = view.getUint32(0, false); // big-endian
    console.log('Первые 4 байта (int32):', first4);
    // Для PNG сигнатура 0x89504E47
  };
  reader.readAsArrayBuffer(file);
});
  
// Для PNG файла: Первые 4 байта (int32): 2303741511 (0x89504E47)

Чтение файла с использованием Streams API (для больших файлов)

Начиная с Chrome 80, можно применять ReadableStream из file.stream() для поточной обработки без загрузки всего файла в память.

Пример 

async function readLargeFile(file) {
  const stream = file.stream();
  const reader = stream.getReader();
  const decoder = new TextDecoder();
  let result = '';
  
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    result += decoder.decode(value, { stream: true });
  }
  console.log(result);
}
// Вызов: readLargeFile(selectedFile);
  
// Чтение происходит порциями, что предотвращает переполнение памяти.

Чтение JS файла и его выполнение с помощью eval (только для демонстрации)

Внимание: eval опасен, данный пример предназначен исключительно для учебных целей.

Пример 

input.addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = function(event) {
    try {
      eval(event.target.result);
    } catch (err) {
      console.error('Ошибка выполнения:', err);
    }
  };
  reader.readAsText(file);
});
  
// Если файл содержит console.log('Hello'), то в консоль выведется Hello.

Открытие файлов JavaScript - comments

En
открыть js (javascript)