在前端html中，上传文件时，一般都是用到 type 属性值为 file 的 input 标签，但在默认情况下，file 类型的 input 标签是不限制选择本地文件的类型的，那么本篇博文，飞鸟慕鱼就来和大家说一说，input file 如何限制本地文件的类型。

input file 代码

默认情况下，input file标签 选择本地文件时，是不受限制的，可以选择压缩包类型文件，文本类型文件，图片类型文件等。

input accept属性介绍

accept：此属性只能与 配合使用。它规定能够上传的文件类型

语法：

参数：

value：可选，具体参考文未的值

input file 只允许图片类型上传

1、只允许图片类型文件上传

设置accept 属性的值为 "image/*" ,只允许图片类型的文件上传

input file 选择文件如下：

2、只允许单一类型的图片文件上传

html代码：

input file 选择文件如下：

input file 其它示例

html代码

input file accept属性部份值介绍文件类型accept 属性值

*.3gppaudio/3gpp, video/3gpp3GPP Audio/Video

*.ac3audio/ac3AC3 Audio

*.asfallpication/vnd.ms-asfAdvanced Streaming Format

*.auaudio/basicAU Audio

*.csstext/cssCascading Style Sheets

*.csvtext/csvComma Separated Values

*.docapplication/mswordMS Word Document

*.dotapplication/mswordMS Word Template

*.dtdapplication/xml-dtdDocument Type Definition

*.dwgimage/vnd.dwgAutoCAD Drawing Database

*.dxfimage/vnd.dxfAutoCAD Drawing Interchange Format

*.gifimage/gifGraphic Interchange Format

*.htmtext/htmlHyperText Markup Language

*.htmltext/htmlHyperText Markup Language

*.jp2image/jp2JPEG-2000

*.jpeimage/jpegJPEG

*.jpegimage/jpegJPEG

*.jpgimage/jpegJPEG

*.jstext/javascript, application/javascriptJavaScript

*.jsonapplication/jsonJavaScript Object Notation

*.mp2audio/mpeg, video/mpegMPEG Audio/Video Stream, Layer II

*.mp3audio/mpegMPEG Audio Stream, Layer III

*.mp4audio/mp4, video/mp4MPEG-4 Audio/Video

*.mpegvideo/mpegMPEG Video Stream, Layer II

*.mpgvideo/mpegMPEG Video Stream, Layer II

*.mppapplication/vnd.ms-projectMS Project Project

*.oggapplication/ogg, audio/oggOgg Vorbis

*.pdfapplication/pdfPortable Document Format

*.pngimage/pngPortable Network Graphics

*.potapplication/vnd.ms-powerpointMS PowerPoint Template

*.ppsapplication/vnd.ms-powerpointMS PowerPoint Slideshow

*.pptapplication/vnd.ms-powerpointMS PowerPoint Presentation

*.rtfapplication/rtf, text/rtfRich Text Format

*.svfimage/vnd.svfSimple Vector Format

*.tifimage/tiffTagged Image Format File

*.tiffimage/tiffTagged Image Format File

*.txttext/plainPlain Text

*.wdbapplication/vnd.ms-worksMS Works Database

*.wpsapplication/vnd.ms-worksWorks Text Document

*.xhtmlapplication/xhtml+xmlExtensible HyperText Markup Language

*.xlcapplication/vnd.ms-excelMS Excel Chart

*.xlmapplication/vnd.ms-excelMS Excel Macro

*.xlsapplication/vnd.ms-excelMS Excel Spreadsheet

*.xltapplication/vnd.ms-excelMS Excel Template

*.xlwapplication/vnd.ms-excelMS Excel Workspace

*.xmltext/xml, application/xmlExtensible Markup Language

*.zipaplication/zipCompressed Archive

PS：

1、input 上传标签的 accept 属性，不能作为限制文件上传的唯一限制。

2、在网站后端接收前台上传的文件时，一定要注意检查