Привет! Недавно я писал статью об отправке файлов на почту, через форму обратной связи (вот она). В ней, я упоминал об атрибуте 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 или в обработчике, но для небольших проектов вполне сгодится и данный способ. Надеюсь статья для вас окажется полезной. А на сегодня - все. Всем пока!
4 комментария
А в каких случаях нужно применять подобные фильтры?
Да это больше не для защиты, а для того, чтобы пользователю было легче найти файл нужного формата, среди прочих документов. Ну например, вам должны отправит ТЗ в docx. Вот, чтобы ему среди всех картинок, аудио и видео на компьютере показывались только файлы в docx и существуют подобные фильтры
А как сделать так чтобчы например можно было выбирать только jpg.а другие файлы вообще бы не вставлял в форму?
Ребят, а можете подсказать, как на лендинг flexbe загрузить презу pdf?