关于input的accept属性的一些总结

在html中的input当指定的type="file"之后此input标签将变成文件上传的一个控件,但是当其打开文件上传的窗口是没有任何筛选的。为了尽可能减少文件的错误上传,我们要在打开文件选择窗口时添加一些文件筛选。但是现在网上已有的资料比较散而且有些文章没有明确使用方法。

现在我在这两总结一下,希望带大家有用 。

首先是input标签

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

 然后我们在这个标签中添加自己的筛选项

筛选的增加方式分为两种:

1.按照标准文件类型比较标准的增加方式

<input type="file" name="file" accept="image/gif,image/jpeg,image/jpg,image/png"/>

上面的筛选方式是指向性比较明显的一个写法,如果限制上传的文件是图片的话还会有另外一种写法

<input type="file" name="file" accept="image/*"/>

 上边这种写法没有验证,如有用的欢迎留言说明一下可用性,在文章的最后我会附上一些网上已有的一些文件格式的一个表

2.不管文件类型,只关注文件的后缀

<input type="file" name="file" accept=".jpeg,.png,.jpg,.pdf,.txt,.doc,.docx"/>

 上面这种方法比较方便,可以对自己单独定义的文件格式进行筛选。

多个格式之间使用“,”分隔

下面是一些常见的文件的一个附表

*.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

上边是一些常用,下面是一些后来作为补充加入的一下新版的word,excel等文件

.xlsx             application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

.xltx              application/vnd.openxmlformats-officedocument.spreadsheetml.template

.potx            application/vnd.openxmlformats-officedocument.presentationml.template

.ppsx           application/vnd.openxmlformats-officedocument.presentationml.slideshow

.pptx            application/vnd.openxmlformats-officedocument.presentationml.presentation

.sldx            application/vnd.openxmlformats-officedocument.presentationml.slide

.docx          application/vnd.openxmlformats-officedocument.wordprocessingml.document

.dotx           application/vnd.openxmlformats-officedocument.wordprocessingml.template

.xlsm          application/vnd.ms-excel.addin.macroEnabled.12

.xlsb           application/vnd.ms-excel.sheet.binary.macroEnabled.12
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玉立琦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值