1 342 views

Фильтр для input file

Для того чтобы указать какие файлы можно выбрать в input можно использовать тег «accept».

Он устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. Тип файла указывается как MIME-тип, при нескольких значениях они перечисляются через запятую. Если файл не подходит под установленный фильтр, он не показывается в окне выбора файлов.

Применяется

К полю для отправки файла (<input type=»file»>)

Значения

Имя MIME-типа в любом регистре, несколько значений перечисляются через запятую.

Хотя можно установить ширину поля через атрибут size, в действительности ширина никак не влияет на результат работы формы. В браузерах Safari и Chrome этот атрибут вообще никакого воздействия не оказывает.

Атрибут multiple более важен, он позволяет не ограничиваться одним файлом для выбора, а указать их сразу несколько для одновременной загрузки.

Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:

  • audio/* — выбор музыкальных файлов любого типа;
  • image/* — графические файлы;
  • video/* — видеофайлы.

В таблице показаны некоторые допустимые значения атрибута accept.

<input type="file" name="photo" multiple accept="image/*,image/jpeg">
Таблица Типы файлов
Значение Описание
image/jpeg Только файлы в формате JPEG.
image/jpeg,image/png Только файлы в формате JPEG и PNG.
image/* Любые графические файлы.
image/*,video/* Любые графические и видеофайлы.

MIME (Multipurpose Internet Mail Extension, Многоцелевые расширения почты Интернета) — спецификация для передачи по сети файлов различного типа: изображений, музыки, текстов, видео, архивов и др. Указание MIME-типа используется в HTML обычно при передаче данных форм и вставки на страницу различных объектов.

Некоторые популярные MIME-типы и расширения файлов с ними связанных приведены в таблице.

Таблица MIME-типы
Расширение файла Тип данных
ai application/postscript
aif audio/aiff
aif audio/x-aiff
aiff audio/aiff
aiff audio/x-aiff
ani application/x-navi-animation
aos application/x-nokia-9000-communicator-add-on-software
aps application/mime
arc application/octet-stream
arj application/arj
arj application/octet-stream
art image/x-jg
asf video/x-ms-asf
asm text/x-asm
asp text/asp
asx application/x-mplayer2
asx video/x-ms-asf
asx video/x-ms-asf-plugin
au audio/basic
au audio/x-au
avi application/x-troff-msvideo
avi video/avi
avi video/msvideo
avi video/x-msvideo
bin application/mac-binary
bin application/macbinary
bin application/octet-stream
bin application/x-binary
bin application/x-macbinary
bm image/bmp
bmp image/bmp
bmp image/x-windows-bmp
boo application/book
book application/book
c text/x-c
c++ text/plain
ccad application/clariscad
class application/java
class application/java-byte-code
class application/x-java-class
com application/octet-stream
com text/plain
conf text/plain
cpp text/x-c
cpt application/mac-compactpro
cpt application/x-compactpro
cpt application/x-cpt
css application/x-pointplus
css text/css
dcr application/x-director
def text/plain
dif video/x-dv
dir application/x-director
dl video/dl
dl video/x-dl
doc application/msword
dot application/msword
drw application/drafting
dvi application/x-dvi
dwg application/acad
dwg image/vnd.dwg
dwg image/x-dwg
dxf application/dxf
dxf image/vnd.dwg
dxf image/x-dwg
dxr application/x-director
exe application/octet-stream
gif image/gif
gz application/x-compressed
gz application/x-gzip
gzip application/x-gzip
gzip multipart/x-gzip
h text/plain
h text/x-h
hlp application/hlp
hlp application/x-helpfile
hlp application/x-winhelp
htc text/x-component
htm text/html
html text/html
htmls text/html
htt text/webviewhtml
ice x-conference/x-cooltalk
ico image/x-icon
inf application/inf
jam audio/x-jam
jav text/plain
jav text/x-java-source
java text/plain
java text/x-java-source
jcm application/x-java-commerce
jfif image/jpeg
jfif image/pjpeg
jfif-tbnl image/jpeg
jpe image/jpeg
jpe image/pjpeg
jpeg image/jpeg
jpeg image/pjpeg
jpg image/jpeg
jpg image/pjpeg
jps image/x-jps
js application/x-javascript
js application/javascript
js application/ecmascript
js text/javascript
js text/ecmascript
latex application/x-latex
lha application/lha
lha application/octet-stream
lha application/x-lha
lhx application/octet-stream
list text/plain
lsp application/x-lisp
lsp text/x-script.lisp
lst text/plain
lzh application/octet-stream
lzh application/x-lzh
lzx application/lzx
lzx application/octet-stream
lzx application/x-lzx
m3u audio/x-mpequrl
man application/x-troff-man
mid application/x-midi
mid audio/midi
mid audio/x-mid
mid audio/x-midi
mid music/crescendo
mid x-music/x-midi
midi application/x-midi
midi audio/midi
midi audio/x-mid
midi audio/x-midi
midi music/crescendo
midi x-music/x-midi
mod audio/mod
mod audio/x-mod
mov video/quicktime
movie video/x-sgi-movie
mp2 audio/mpeg
mp2 audio/x-mpeg
mp2 video/mpeg
mp2 video/x-mpeg
mp2 video/x-mpeq2a
mp3 audio/mpeg3
mp3 audio/x-mpeg-3
mp3 video/mpeg
mp3 video/x-mpeg
mp4 video/mp4
mpa audio/mpeg
mpa video/mpeg
mpeg video/mpeg
mpg audio/mpeg
mpg video/mpeg
mpga audio/mpeg
pas text/pascal
pcl application/vnd.hp-pcl
pcl application/x-pcl
pct image/x-pict
pcx image/x-pcx
pdf application/pdf
pic image/pict
pict image/pict
pl text/plain
pl text/x-script.perl
pm image/x-xpixmap
pm text/x-script.perl-module
pm4 application/x-pagemaker
pm5 application/x-pagemaker
png image/png
pot application/mspowerpoint
pot application/vnd.ms-powerpoint
ppa application/vnd.ms-powerpoint
pps application/mspowerpoint
pps application/vnd.ms-powerpoint
ppt application/mspowerpoint
ppt application/powerpoint
ppt application/vnd.ms-powerpoint
ppt application/x-mspowerpoint
ppz application/mspowerpoint
ps application/postscript
psd application/octet-stream
pwz application/vnd.ms-powerpoint
py text/x-script.phyton
pyc applicaiton/x-bytecode.python
qt video/quicktime
qtif image/x-quicktime
ra audio/x-pn-realaudio
ra audio/x-pn-realaudio-plugin
ra audio/x-realaudio
ram audio/x-pn-realaudio
rm application/vnd.rn-realmedia
rm audio/x-pn-realaudio
rpm audio/x-pn-realaudio-plugin
rtf application/rtf
rtf application/x-rtf
rtf text/richtext
rtx application/rtf
rtx text/richtext
rv video/vnd.rn-realvideo
sgml text/sgml
sgml text/x-sgml
sh application/x-bsh
sh application/x-sh
sh application/x-shar
sh text/x-script.sh
shtml text/html
shtml text/x-server-parsed-html
ssi text/x-server-parsed-html
tar application/x-tar
tcl application/x-tcl
tcl text/x-script.tcl
text application/plain
text text/plain
tgz application/gnutar
tgz application/x-compressed
tif image/tiff
tif image/x-tiff
tiff image/tiff
tiff image/x-tiff
txt text/plain
uri text/uri-list
vcd application/x-cdlink
vmd application/vocaltec-media-desc
vrml application/x-vrml
vrml model/vrml
vrml x-world/x-vrml
vsd application/x-visio
vst application/x-visio
vsw application/x-visio
wav audio/wav
wav audio/x-wav
wmf windows/metafile
xla application/excel
xla application/x-excel
xla application/x-msexcel
xlb application/excel
xlb application/vnd.ms-excel
xlb application/x-excel
xlc application/excel
xlc application/vnd.ms-excel
xlc application/x-excel
xld application/excel
xld application/x-excel
xlk application/excel
xlk application/x-excel
xll application/excel
xll application/vnd.ms-excel
xll application/x-excel
xlm application/excel
xlm application/vnd.ms-excel
xlm application/x-excel
xls application/excel
xls application/vnd.ms-excel
xls application/x-excel
xls application/x-msexcel
xlt application/excel
xlt application/x-excel
xlv application/excel
xlv application/x-excel
xlw application/excel
xlw application/vnd.ms-excel
xlw application/x-excel
xlw application/x-msexcel
xm audio/xm
xml application/xml
xml text/xml
z application/x-compress
z application/x-compressed
zip application/x-compressed
zip application/x-zip-compressed
zip application/zip
zip multipart/x-zip
This site is using the Seo Wizard wordpress plugin by www.seowizard.org.