hi,欢迎访问本站!
当前位置: 首页系统/服务器正文

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

墨初 系统/服务器 674阅读

在前端html中,上传文件时,一般都是用到 type 属性值为 file 的 input 标签,但在默认情况下,file 类型的 input 标签是不限制选择本地文件的类型的。

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

默认情况下,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/*" />

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

html代码:

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

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*.zipapplication/zipCompressed Archive

标签:
声明:无特别说明,转载请标明本文来源!