文件上传input type=“file”的accept接收的各种文件类型总结

前言

        前端选择文件时，都会使用 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
.pdf	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/*" />

参考：https://blog.youkuaiyun.com/millia/article/details/134200983