Как фильтровать input type file по расширению?

Мы собрали методы фильтрации тега input type file с примерами!

Атрибут accept в теге <input type="file" accept="image/*"> – это один из инструментов веб-разработки, который позволяет фильтровать файлы, которые пользователь может выбирать для загрузки на сервер.

База атрибута accept в <input type="file">:

Атрибут accept устанавливает фильтр на типы файлов в окне выбора файла. Можно установить разрешение файлов или их MIME-типы, например: image/jpeg. Рассмотрим несколько примеров использования этого атрибута.

Как разрешить только один тип файлов?

Разрешить выбор только файлов PNG в file input:

<form action="" method="post" enctype="multipart/form-data">
	<label>Файл PNG:</label>
	<input type="file" name="file" accept=".png">
</form>

Как выбирать несколько расширений?

Выбор файлов с расширениями JPG, JPEG, PNG:

<form action="" method="post" enctype="multipart/form-data">
  <label>Файл JPG или PNG:</label>
  <input type="file" name="file" accept=".jpg,.jpeg,.png">
</form>

Как ограничить по MIME-типу в file input?

Так как у файлов с одним MIME-типом может быть множество расширений, проще сделать фильтровку по нему, например text/plain:

<form action="" method="post" enctype="multipart/form-data">
  <label>Текстовые файлы:</label>
  <input type="file" name="file" accept="text/plain">
</form>

Как фильтровать по группе файлов в input file?

HTML5 ввел новые атрибуты для различных групп файлов: audio/*, video/*, image/*. Разрешим выбирать любые изображения в file input:

<form action="" method="post" enctype="multipart/form-data">
  <label>Любые изображение:</label>
  <input type="file" name="file" accept="image/*">
</form>

Какая поддержка в браузерах accept?

При использовании атрибута accept важно учитывать его поддержку в различных браузерах. Большинство современных браузеров поддерживают этот атрибут. Узнать какие браузеры поддерживают атрибут accept в input file можно в табличке ниже.

Атрибут accept удобен для управления типами файлов, которые пользователь может выбрать. Создавайте удобные интерфейсы для загрузки файлов, без танцов с бубном jquery/javascript.