Ограничение типа файлов в HTML input: решение на JS

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

Чтобы наложить ограничения на типы файлов, которые может выбрать пользователь, добавьте атрибут accept в элемент <input>:

<input type="file" accept=".png, .jpeg">

Это позволит выбирать только файлы с расширениями .png и .jpeg, исключая все остальные.

Добавление MIME-типов для повышения совместимости

Указание MIME-типов в атрибуте accept усиливает кроссбраузерную функциональность:

<input type="file" accept="image/png, image/jpeg">

Для максимальной совместимости рекомендуется указывать как MIME-типы, так и расширения файлов:

<input type="file" accept=".png, .jpeg, image/png, image/jpeg">

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

Представьте <input type="file"> как фильтр, контролирующий типы подаваемых файлов. Атрибут accept задаёт правила этого контроля:

Cторож: "Какой у вас тип файла?" 
.txt: "У меня .txt, можно мне пройти?" 
Cторож: "Конечно ✅ Добро пожаловать!"

.jpg: "Я .jpg, позволите мне пройти?" 
Cторож: "Безусловно ✅ Входите!"

.xls: "А .xls может войти?" 
Cторож: "Сегодня не получится ❌ Попробуйте другую дверь."

Вот как настроен этот контроль:

<input type="file" accept=".txt, .jpg">

Теперь .txt и .jpg проходят, а .xls остаётся за дверью.

Усиление клиентской валидации

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

Обработка выбора файла с помощью события onchange

Добавьте обработчик события onchange к элементу ввода файла для проверки расширений файлов "на лету". Мы признаём только определённые типы файлов.

document.getElementById('fileInput').onchange = function(e) {
    // Мы тщательно подходим к выбору форматов. В список допустимы только .png и .jpeg
    if(!e.target.files[0].name.match(/\.(png|jpeg)$/)) {
        alert('Принимаются только файлы форматов .png и .jpeg!');
        e.target.value = ''; // Мы не допускаем тех, кто не соответствует критериям
    }
};

Валидация файлов при отправке формы через onsubmit

Проведите последнюю проверку выбранных файлов при попытке отправить форму, используя обработчик события onsubmit:

document.getElementById('myForm').onsubmit = function(e) {
    // Проверка перед стартом! Есть ли .png или .jpeg?
    var files = document.getElementById('fileInput').files;
    if (!files.length || !files[0].name.match(/\.(png|jpeg)$/)) {
        alert('Пожалуйста, приложите файл в формате .png или .jpeg!');
        e.preventDefault(); // Правила нарушены, вход закрыт.
    }
};

Не забывайте, что валидация на клиентской стороне является удобным дополнением, но для обеспечения безопасности необходимы также проверки на сервере.

Устраняющие несоответствия браузеров

Работа с особенностями атрибута accept

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

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

Обеспечение согласованной работы в разных браузерах

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

Усиление безопасности через серверную валидацию

Серверная валидация — это не просто вариант, а обязательное требование. Непременно проведите проверку MIME-типа и бинарной подписи файла, чтобы предотвратить злонамеренную загрузку.

Знакомство с HTML5 File API

Познакомьтесь с HTML5 File API: с его помощью вы можете проверять фактическое содержимое файла на стороне клиента. Добро пожаловать на новый этап валидации.

Будьте в курсе: лучшие практики безопасности при загрузке файлов

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