Фильтр файлов по расширению у 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
10728

Комментарии

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

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

Загрузка файлов через jQuery AJAX
В преведущей статье был приведен пример отправки файлов через AJAX с помощью плагина «jQuery Form Plugin». Но файлы...
35616
+5
Загрузка файлов через AJAX с помощью jQuery Form Plugin
Пример загрузки изображений через AJAX с помощью плагина jQuery Form Plugin.
16148
+6
Загрузка изображений с превью AJAX + PHP + MySQL
В данной статье представлена упрощенная реализация загрузки изображений с превью через AJAX с сохранением в базу данных...
18019
+19
Блокировка многократной отправки формы
Из-за отправки файла, медленного интернета или тормозящего браузера, пользователь может нажать кнопку отправки формы...
7925
+3
Массив $_FILES
В PHP-скрипте обработка загруженных через форму происходит через глобальный массив $_FILES, рассмотрим его содержимое...
14265
+1
Работа с директориями в PHP
Набор PHP функций для работы с директориями, получение списка файлов в папке, копирование и удаление содержимого папок.
20623
0