Smartlanding

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

4 комментария

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

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

    Ответить
  • dimadv7

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

    Ответить
  • дмитрий

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

    Ответить
  • Роман

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

    Ответить

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