Ограничение выбора файлов по расширению в HTML

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

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

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

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

Подробный разбор ограничений по типам файлов

Учёт особенностей атрибута accept

Функционал атрибута accept может отличаться в зависимости от браузера. Например, Internet Explorer начинает его поддерживать только с 9-й версии. Не забывайте проверять совместимость с теми браузерами, которыми пользуется ваша целевая аудитория.

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

Валидация на стороне клиента с применением JavaScript

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

document.getElementById("myFileInput").addEventListener('change', function(event) {
  var validExtensions = ['jpg', 'png', 'gif']; // Допустимые расширения файлов
  var fileName = event.target.files[0].name;
  var fileExtension = fileName.split('.').pop().toLowerCase();
  if(validExtensions.indexOf(fileExtension) < 0) {
    alert("Выбран файл недопустимого формата!");
    this.value = ''; // Очистка значения поля ввода
  }
});

Дополнительная валидация на серверной стороне

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

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

Воззрите на элемент <input type="file"> как на портье, который определяет, какие файлы могут быть загружены:

Допуск разрешён для: [.jpg, .png, .gif]

Атрибут acceptрешает, какие файлы будут допущены:

<!-- Портье следит за соблюдением регламента -->
<input type="file" accept=".jpg,.png,.gif">

Теперь на "вечеринку" загрузки попадут только подходящие файлы:

До:    [📄, 🖼️.jpg, 🎵.mp3, 🌠.gif, 📊.xls, 🖌️.png]
После: [             🖼️.jpg,          🌠.gif,          🖌️.png]

Только файлы с утверждёнными расширениями получат VIP-доступ на "вечеринку" загрузки! 🎉

Кроссбраузерность и альтернативы

Разное поведение в разных браузерах

Браузеры могут по-разному интерпретировать атрибут accept: работа Chrome и Firefox может отличаться от Safari или устаревших версий IE. Уделите внимание тестированию на совместимость.

Альтернативные методы для несовместимых браузеров

Для браузеров, не поддерживающих атрибут accept, или в случаях отключенного JavaScript рассмотрите альтернативные решения, например, на основе Flash или Java. Идеальный вариант — постепенное ухудшение пользовательского опыта, позволяющее загружать файлы пользователям со старым оборудованием.

Синхронизация клиент-сервер

Улучшение UX через XMLHttpRequest

Улучшить пользовательский опыт поможет применение XMLHttpRequest или Fetch API для асинхронной загрузки файлов. Такие технологии позволяют отслеживать процесс и информировать пользователя о прогрессе загрузки:

var xhr = new XMLHttpRequest(); 
xhr.open('POST', 'upload_endpoint'); 
xhr.upload.onprogress = function(event) { 
  if (event.lengthComputable) { 
    var percentComplete = (event.loaded / event.total) * 100; 
    console.log('Процесс загрузки: ' + percentComplete + '%');
  } 
}; 
xhr.onload = function() { 
  if (xhr.status == 200) { 
    console.log('Загрузка успешно завершена: ' + xhr.responseText); 
  } else { 
    console.log('Ошибка во время загрузки: ' + xhr.statusText); 
  } 
}; 
xhr.send(new FormData(document.getElementById('uploadForm')));

Усиление безопасности на серверной стороне

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

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

1. Атрибут accept элемента input HTML — руководство по атрибуту accept.
2. <input type="file"> – HTML | MDN — документация MDN по <input type="file">.
3. Атрибут accept для ввода файлов – Stack Overflow — дискуссия о полезности атрибута accept.
4. Использование файлов из веб-приложений – Web APIs | MDN — руководство по работе с файлами в веб-приложениях используя File API.
5. Проверка расширения файла перед загрузкой – Stack Overflow — методы для проверки типа файла на клиенте с помощью JavaScript.
6. Простая загрузка файлов с помощью JavaScript | FilePond — документация библиотеки FilePond, включая установку допустимых типов файлов.
7. Can I use... Support tables for HTML5, CSS3, etc. — таблицы поддержки браузерами атрибута accept.