Выбор файла: что браузер разрешает форме

Назначение

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

Как это работает

Создайте input type="file" id document-file и абзац id file-status в учебном документе. Список files содержит объекты File; значение обычного value не следует использовать как настоящий путь на компьютере.

Пример

const input = document.querySelector("#document-file");
const status = document.querySelector("#file-status");
input.addEventListener("change", () => {
  const file = input.files[0];
  status.textContent = file ? `${file.name}: ${file.size} байт` : "Файл не выбран";
});

Что должно получиться

Страница показывает имя и размер выбранного файла как текст. Пример ничего не читает из содержимого и никуда его не отправляет; отсутствие выбора обработано отдельным состоянием.

Граница применения и частая ошибка

Accept лишь помогает выбору и не заменяет серверную проверку типа, размера и содержимого. Имя файла и заявленный MIME-тип нельзя считать доказательством безопасности. Не вставляйте имя через innerHTML и не записывайте пользовательский путь как путь назначения на сервере.

Самостоятельная проверка

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

Связанные материалы

• Ошибки формы
• События
• Постепенное улучшение