File API: файлы, Blob и FileReader

Файл, Blob и модель безопасности

Браузер не даёт странице доступа к диску пользователя. Файл попадает в код как объект File, только когда пользователь выбрал его в окне выбора или перетащил на страницу. Содержимое сразу не читается: объект — это лишь ссылка.

• Blob — неизменяемые сырые данные с типом (type) и размером (size).
• File — подкласс Blob с добавленными name и lastModified.
• FileReader — старый событийный API чтения, а Promise-методы вроде file.text() — новый путь.

💡 В Node.js 20+ тоже есть Blob и File, поэтому многие примеры можно проверить без браузера.

input[type=file] и проверка

Для выбора файла достаточно input. multiple разрешает несколько файлов, accept фильтрует окно выбора.

<input type="file" id="file" accept="image/*,.pdf" multiple>

Выбранные файлы лежат в input.files в событии change. Допустим, выбрано два файла:

const input = document.querySelector('#file');

input.addEventListener('change', () => {
  const files = input.files;
  for (const file of files) {
    console.log(file.name, file.type, file.size);
  }
});

Сначала проверяйте, потом обрабатывайте: тип и размер.

const MAX_SIZE = 2 * 1024 * 1024;
const ALLOWED = ['image/png', 'image/jpeg'];

function validate(file) {
  if (!ALLOWED.includes(file.type)) return `type ${file.type} not allowed`;
  if (file.size > MAX_SIZE) return 'file is too large';
  return null;
}

const small = new File(['abc'], 'a.png', { type: 'image/png' });
const text = new File(['abc'], 'a.txt', { type: 'text/plain' });
console.log(validate(small));
console.log(validate(text));