前言
前端选择文件时,都会使用 input 框设定 type="file" 来选择文件,默认情况下可以选择所有类型的文件,有时候需要限定选择的文件类型,这时候就用到了 accept 属性。
ps:accept 属性仅适用于 <input type="file"/>
accept 各种类型
文件类型 | accept 属性值(多个值之间以逗号隔开) |
---|---|
.3gpp | audio/3gpp, video/3gpp |
.ac3 | audio/ac3 |
.asf | allpication/vnd.ms-asf |
.au | audio/basic |
.css | text/css |
.csv | text/csv |
.doc | application/msword |
.docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
.dot | application/msword |
.dotx | application/vnd.openxmlformats-officedocument.wordprocessingml.template |
.docm | application/vnd.ms-word.document.macroEnabled.12 |
.dotm | application/vnd.ms-word.template.macroEnabled.12 |
.dtd | application/xml-dtd |
.dwg | image/vnd.dwg |
.dxf | image/vnd.dxf |
.gif | image/gif |
.htm | text/html |
.html | text/html |
.jp2 | image/jp2 |
.jpe | image/jpeg |
.jpeg | image/jpeg |
.jpg | image/jpeg |
.js | text/javascript, application/javascript |
.json | application/json |
.mp2 | audio/mpeg, video/mpeg |
.mp3 | audio/mpeg |
.mp4 | audio/mp4, video/mp4 |
.mpeg | video/mpeg |
.mpg | video/mpeg |
.mpp | application/vnd.ms-project |
.ogg | application/ogg, audio/ogg |
application/pdf | |
.png | image/png |
.pot | application/vnd.ms-powerpoint |
.potm | application/vnd.ms-powerpoint.presentation.macroEnabled.12 |
.potx | application/vnd.openxmlformats-officedocument.presentationml.template |
.pps | application/vnd.ms-powerpoint |
.ppsm | application/vnd.ms-powerpoint.slideshow.macroEnabled.12 |
.ppsx | application/vnd.openxmlformats-officedocument.presentationml.slideshow |
.ppt | application/vnd.ms-powerpoint |
.pptm | application/vnd.ms-powerpoint.presentation.macroEnabled.12 |
.pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |
.ppa | application/vnd.ms-powerpoint |
.ppam | application/vnd.ms-powerpoint.addin.macroEnabled.12 |
.rtf | application/rtf, text/rtf |
.svf | image/vnd.svf |
.tif | image/tiff |
.tiff | image/tiff |
.txt | text/plain |
.wdb | application/vnd.ms-works |
.wps | application/vnd.ms-works |
.xhtml | application/xhtml+xml |
.xlc | application/vnd.ms-excel |
.xlm | application/vnd.ms-excel |
.xla | application/vnd.ms-excel |
.xlam | application/vnd.ms-excel.addin.macroEnabled.12 |
.xls | application/vnd.ms-excel |
.xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
.xlsm | application/vnd.ms-excel.sheet.macroEnabled.12 |
.xlsb | application/vnd.ms-excel.sheet.binary.macroEnabled.12 |
.xlt | application/vnd.ms-excel |
.xltx | application/vnd.openxmlformats-officedocument.spreadsheetml.template |
.xltm | application/vnd.ms-excel.template.macroEnabled.12 |
.xlw | application/vnd.ms-excel |
.xml | text/xml, application/xml |
.zip | application/zipapplication/x-zip-compressed |
当然,也可以使用 * 指定所有的文件类型,比如:“*” 指定所有文件类型;“image/*” 指定所有图片类型;“audio/*” 或 “video/*” 指定所有视频类型。
用法
<input type="file" accept="image/*,video/*" />