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

input type file acceptПривет! Недавно я писал статью об отправке файлов на почту, через форму обратной связи (вот она). В ней, я упоминал об атрибуте 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 или в обработчике, но для небольших проектов вполне сгодится и данный способ. Надеюсь статья для вас окажется полезной. А на сегодня - все. Всем пока!

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 4

  1. Денис Тумилович

    А в каких случаях нужно применять подобные фильтры?

    • dimadv7

      Да это больше не для защиты, а для того, чтобы пользователю было легче найти файл нужного формата, среди прочих документов. Ну например, вам должны отправит ТЗ в docx. Вот, чтобы ему среди всех картинок, аудио и видео на компьютере показывались только файлы в docx и существуют подобные фильтры

  2. дмитрий

    А как сделать так чтобчы например можно было выбирать только jpg.а другие файлы вообще бы не вставлял в форму?

  3. Роман

    Ребят, а можете подсказать, как на лендинг flexbe загрузить презу pdf?

Добавить комментарий