Фильтр файлов по расширению у input file

Атрибут accept в <input type="file"> устанавливает фильтр на типы файлов в окне выбора файла. В качестве значения может использоваться разрешение файлов или их MIME-типы (например: image/jpeg).

Примеры использования:

Выбор только файлов PNG:

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

Пример:

Выбор только файлов 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>
HTML

Пример:

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

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

Пример:

В HTML5 допустимо указывать группу файлов:

  • audio/* – любые аудио файлы;
  • video/* – любые видеофайлы;
  • image/* – любые графические файлы;
<form action="" method="post" enctype="multipart/form-data">
	<label>Графические файлы:</label>
	<input type="file" name="file-1" accept="image/*">
	
	<label>Аудио и видео файлы:</label>
	<input type="file" name="file-2" accept="audio/*,video/*">
</form>
HTML

Пример:

11.01.2021, обновлено 14.12.2021
8140

Комментарии

, чтобы добавить комментарий.

Другие публикации

Загрузка файлов через AJAX с помощью jQuery Form Plugin
Пример загрузки изображений через AJAX с помощью плагина jQuery Form Plugin.
15306
+5
Загрузка изображений с превью AJAX + PHP + MySQL
В данной статье представлена упрощенная реализация загрузки изображений с превью через AJAX с сохранением в базу данных...
14264
+18
Блокировка многократной отправки формы
Из-за отправки файла, медленного интернета или тормозящего браузера, пользователь может нажать кнопку отправки формы...
6713
+3
Массив $_FILES
В PHP-скрипте обработка загруженных через форму происходит через глобальный массив $_FILES, рассмотрим его содержимое...
10996
+1
Работа с директориями в PHP
Набор PHP функций для работы с директориями, получение списка файлов в папке, копирование и удаление содержимого папок.
18947
+1
Генерация превьюшек изображений на лету
В движках интернет магазинов, часто при добавлении товара и загрузке его фото, на сервере сразу генерируются превью...
4050
+2