Атрибут accept в input type file

Привет! Недавно я писал статью об отправке файлов на почту, через форму обратной связи (вот она). В ней, я упоминал об атрибуте accept, который позволяет фильтровать файлы, загружаемые в форму. То есть можно указать определенный тип файла и при поиске на компьютере, пользователю будут показываться файлы только этого типа данных. Надеюсь понятно объяснил - приступим...

Для того чтобы ограничить форму на добавление только картинок, музыкальных или видео файлов следует в accept дописать (image/*), (audio/*) или (video/*):

<input name="upl" type="file" accept="image/*" />

В таком случае, пользователю при выборе файла будут показываться только указанный тип данных. Я протестировал данный вид записи в последних версиях Google Chrom, Яндекс Браузер, Opera, Firefox Developer Edition и Explorer. Как думаете, в каком из браузеров не работает подобный фильтр? Правильно! Во всех протестированных браузер - все отлично работает. Вы же так и подумали?

Уже не плохо. Давайте копнем глубже и попробуем указать формат. Для картинки укажу png, для аудио - mp3, а для видео mp4 и проверю.

<input name="upl" type="file" accept="image/png" />

И знаете, что произошло? Все справились на отлично, кроме... Барабанная дробь... Кроме Firefox, что стало большим удивлением для меня. Но ничего не поделать. Двигаемся дальше.

Для фильтра по документам pdf и doc, docx воспользуйтесь следующей структурой:

<input name="upl" type="file" accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"/>

Все, кроме мозилы - отлично справились. Давайте позволим нашей форме работать еще и с Excel. Для это пишем:

<input name="upl" type="file" accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>

Таким образом, наша форма стала понимать pdf, файлы MS Word и Excel. Конечно, для того, чтобы данная форма была универсальной и технологичной нужно проверять ее при помощи javascript или в обработчике, но для небольших проектов вполне сгодится и данный способ. Надеюсь статья для вас окажется полезной. А на сегодня - все. Всем пока!