Как из JavaScript прочитать файл в браузере?

Чтение файлов в браузере из JavaScript

В браузере существует несколько способов прочитать файл. Выбор способа зависит от источника файла и формата данных, с которыми ты работаешь.

Способ 1: File Input (загрузка файла пользователем)

Это самый распространённый способ, когда пользователь выбирает файл через input type="file":

// HTML
<input type="file" id="fileInput" accept=".txt,.csv,.json" />
<button onclick="readFile()">Прочитать файл</button>

// JavaScript
function readFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0]; // Первый выбранный файл
  
  if (!file) {
    console.log('Файл не выбран');
    return;
  }
  
  const reader = new FileReader();
  
  // Событие для успешного чтения
  reader.onload = (event) => {
    const content = event.target.result;
    console.log('Содержимое файла:', content);
  };
  
  // Обработка ошибок
  reader.onerror = () => {
    console.error('Ошибка при чтении файла:', reader.error);
  };
  
  // Читаем файл как текст
  reader.readAsText(file);
}

Способ 2: FileReader с разными форматами

FileReader поддерживает разные способы чтения в зависимости от типа файла:

const file = document.getElementById('fileInput').files[0];
const reader = new FileReader();

// 1. readAsText() — для текстовых файлов
reader.readAsText(file, 'UTF-8');

// 2. readAsArrayBuffer() — для бинарных данных
reader.readAsArrayBuffer(file);

// 3. readAsDataURL() — для изображений и медиа
reader.readAsDataURL(file);

// 4. readAsBlob() — для работы с Blob
reader.readAsBlob();

reader.onload = (e) => {
  if (file.type === 'application/json') {
    const data = JSON.parse(e.target.result);
    console.log('JSON данные:', data);
  } else if (file.type.startsWith('image/')) {
    const img = new Image();
    img.src = e.target.result;
    document.body.appendChild(img);
  }
};

Способ 3: Drag & Drop для чтения файлов

Позволяет пользователю перетащить файл в определённую зону:

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

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropZone.classList.add('drag-over');
});

dropZone.addEventListener('dragleave', () => {
  dropZone.classList.remove('drag-over');
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  dropZone.classList.remove('drag-over');
  
  const files = e.dataTransfer.files;
  const file = files[0];
  
  const reader = new FileReader();
  reader.onload = (event) => {
    console.log('Прочитанный файл:', event.target.result);
  };
  
  reader.readAsText(file);
});

Способ 4: Fetch API для загрузки файлов с сервера

Если файл находится на сервере, используй Fetch:

// Чтение текстового файла с сервера
fetch('/data/users.json')
  .then(response => {
    if (!response.ok) throw new Error('Ошибка загрузки');
    return response.text(); // или .json(), .blob()
  })
  .then(content => {
    console.log('Содержимое:', content);
  })
  .catch(error => console.error('Ошибка:', error));

// С использованием async/await
async function loadFile() {
  try {
    const response = await fetch('/data/users.json');
    const data = await response.json();
    console.log('Данные:', data);
  } catch (error) {
    console.error('Ошибка загрузки файла:', error);
  }
}

Способ 5: Blob и URL.createObjectURL

Для работы с бинарными данными и создания загружаемых файлов:

const file = document.getElementById('fileInput').files[0];
const reader = new FileReader();

reader.onload = (e) => {
  // Преобразование в Blob
  const blob = new Blob([e.target.result], { type: 'text/plain' });
  
  // Создание ссылки для скачивания
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'файл.txt';
  a.click();
  
  // Очистка памяти
  URL.revokeObjectURL(url);
};

reader.readAsText(file);

Способ 6: Современный Fetch с FormData

Для отправки файла на сервер:

const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];

const formData = new FormData();
formData.append('file', file);
formData.append('userId', '123');

fetch('/api/upload', {
  method: 'POST',
  body: formData // Не устанавливаем Content-Type!
})
.then(response => response.json())
.then(data => console.log('Результат:', data))
.catch(error => console.error('Ошибка:', error));

Практический пример: Валидация CSV файла

function validateCSV(file) {
  const reader = new FileReader();
  
  reader.onload = (e) => {
    const content = e.target.result;
    const lines = content.split('\n');
    const headers = lines[0].split(',');
    
    console.log('Заголовки:', headers);
    
    const data = lines.slice(1).map(line => {
      const values = line.split(',');
      return Object.fromEntries(
        headers.map((header, i) => [header, values[i]])
      );
    });
    
    console.log('Данные:', data);
  };
  
  reader.readAsText(file);
}

Ограничения и лучшие практики

1. Безопасность: Всегда валидируй данные на клиенте и сервере
2. Размер файла: Проверяй file.size перед чтением больших файлов
3. Типы файлов: Используй file.type для проверки расширения
4. Память: Для больших файлов используй chunking вместо полного чтения
5. Очистка: Вызывай URL.revokeObjectURL() для освобождения памяти

Проверка типа и размера файла

const file = document.getElementById('fileInput').files[0];

if (file.size > 5 * 1024 * 1024) {
  console.error('Файл слишком большой (макс. 5MB)');
  return;
}

const allowedTypes = ['text/plain', 'application/json', 'text/csv'];
if (!allowedTypes.includes(file.type)) {
  console.error('Недопустимый тип файла');
  return;
}

console.log('Файл валиден:', file.name, file.size, file.type);