Для того чтобы указать какие файлы можно выбрать в 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-типы и расширения файлов с ними связанных приведены в таблице.
Расширение файла | Тип данных |
---|---|
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 |
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 |