Получение имени файла из input type=file: подробное руководство

Быстрый ответ

Чтобы получить название файла, выбранного через <input type="file">, достаточно назначить обработчик события 'change' и обратиться к свойству name первого файла в списке files элемента ввода. Вот пример кода:

document.querySelector('input[type="file"]').addEventListener('change', function() {
  console.log("Выбранный файл:", this.files[0].name);
});

Следует поместить этот скрипт сразу после HTML-элемента input:

<input type="file" />

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

Подробное объяснение

Итак, давайте разберем подробнее эту тему. Мы исследуем различные способы получения имени файла, рассмотрим обработку выбора нескольких файлов, способы извлечения дополнительной информации о файле, а также обсудим взаимодействие с разными браузерами и методы формирования осведомленных уведомлений пользователю.

Работа со свойствами файла и обработка выбора нескольких файлов

Получение дополнительных свойств

Помимо названия файла, вы можете получить и другие данные, например, тип и размер файла, используя File API:

document.getElementById('fileInput').addEventListener('change', function() {
  if (this.files.length === 0) {
    console.log('Файл не выбран. Возможно, время для перерыва и кофе ☕️.');
  } else {
    const file = this.files[0];
    console.log("Выбранный файл:", file.name);
    console.log("Тип файла:", file.type);
    console.log("Размер файла:", file.size, "байт");
  }
});

Проверка на отсутствие выбранного файла поможет адеkvатно обрабатывать эту ситуацию без возникновения ошибок.

Подробнее об этом расскажет наш спикер на видео

Обработка выбора нескольких файлов

Если у <input> присутствует атрибут multiple, файлы можно обработать следующим образом:

document.getElementById('multiFileInput').addEventListener('change', function() {
  for(let i = 0; i < this.files.length; i++) {
    const file = this.files[i];
    console.log(`Файл ${i + 1}:`, file.name);
  }
});

Взаимодействие с пользователем и организация кроссбраузерности

Дружественные уведомления для пользователя

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

function formatBytes(bytes, decimals = 2) {
  if (bytes === 0) return '0 Байт';
  const k = 1024;
  const dm = decimals < 0 ? 0 : decimals;
  const sizes = ['Байт', 'КБ', 'МБ', 'ГБ', 'ТБ', 'ПБ', 'ЭБ', 'ЗБ', 'ИБ'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

Теперь размер файла отображается так, что он становится понятен любому пользователю.

Обеспечение совместимости

У различных браузеров могут быть разные возможности, поэтому ваш код должен быть совместим с разными версиями браузеров. Хотя большинство современных браузеров обладают хорошей поддержкой работы с файлами, некоторые устаревшие версии могут испытывать затруднения.

Визуализация

Давайте проиллюстрируем это всё при помощи аналогии с открытым микрофоном:

🎤 – Никого нет (файл не выбран)
🎤 – Ожидаем участников…
🎤 – У нас кто-то присоединяется! (файл выбран)

После выбора файла у нас есть:

document.getElementById('fileInput').onchange = function() {
    console.log("На сцене: " + this.files[0].name);
};

И затем объявляется имя файла:

🔊 **Имя файла:** "awesome_track.mp3"

Примечание: Не забудьте заменить 'fileInput' на ID вашего input-элемента.

Бонус

Уникальная обработка ID

Для каждого <input type="file"> на странице стоит использовать уникальный id, чтобы корректно отрабатывать каждый начальный элемент.

Использование jQuery

$('.fileUploader').on('change', function() {
  alert("Выбранный файл: " + this.files[0].name);
});

jQuery можно использовать для более простой и элегантной подписки на события.

Проверка пользовательского ввода

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

Полезные материалы

1. Использование файлов в веб-приложениях – Веб-API | MDN — Руководство по работе с файлами в веб-приложениях.
2. Файлы и FileReader — Учебник, детально рассказывающий о работе с файлами на JavaScript.
3. Чтение файлов в JavaScript с использованием file and FileReader API | web.dev — Статья о чтении файлов в JavaScript с использованием современных API.
4. HTML-стандарт — Официальный стандарт, касающийся полей ввода для загрузки файлов.
5. Событие change HTMLElement – Веб-API | MDN — Подробное описание события изменения, которое играет ключевую роль в отслеживании выбора файлов.