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

input file 代码

<input type="file" name="Files" />

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

input file限制上传文件类型的方法

input accept属性介绍

accept:此属性只能与 <input type="file"> 配合使用。它规定能够上传的文件类型

语法:

<input type="file" accept="value">

参数:

value:可选,具体参考文未的值

input file 只允许图片类型上传

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

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

<!--只允许图片类型文件-->
<input type="file" name="Files" accept="image/*" />

input file 选择文件如下:

input file限制上传文件类型的方法


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

html代码:

<!--只允许jpg类型的图片文件-->
<input type="file" name="Files" accept="image/jpeg" />

input file 选择文件如下:

input file限制上传文件类型的方法

input file 其它示例

html代码

<!--只允许文本文件-->
<input type="file" name="Files" accept="text/plain" />
<!--只允许png类型的图片文件-->
<input type="file" name="Files" accept="image/png" />
<!--只允许zip类型的压缩包文件-->
<input type="file" name="Files" accept="aplication/zip" />
<!--只允许PPT类型的文件-->
<input type="file" name="Files" accept="application/vnd.ms-powerpoint" />

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、在网站后端接收前台上传的文件时,一定要注意检查