在做项目项目中经常需要上传文件,类型也就那几种。虽然在js中加了上传文件类型的限制,但是为了减少因为用户选择不当而造成的反复检验。可以在input标签上加上accept属性。这种限制只是优化了选择文件的过程,但是没法真正做到限制文件类型因为:

看到没有,是可以选择的。所以还得以自己的验证代码为准。

浏览器支持情况

Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 6 支持 accept 属性。

注意:Internet Explorer 9 及之前的版本都不支持 <input> 标签的 accept 属性。

用法

可以单个限制使用也可以组合使用 比如:

<input accept="audio/*,video/*,image/*" />

<input accept="audio/*" />

<input accept="image/png" />

另外附上一些文件对应类型

*.3gpp  audio/3gpp, video/3gpp  3GPP Audio/Video
*.ac3 audio/ac3 AC3 Audio
*.asf allpication/vnd.ms-asf Advanced Streaming Format
*.au audio/basic AU Audio
*.css text/css Cascading Style Sheets
*.csv text/csv Comma Separated Values
*.doc application/msword MS Word Document
*.dot application/msword MS Word Template
*.dtd application/xml-dtd Document Type Definition
*.dwg image/vnd.dwg AutoCAD Drawing Database
*.dxf image/vnd.dxf AutoCAD Drawing Interchange Format
*.gif image/gif Graphic Interchange Format
*.htm text/html HyperText Markup Language
*.html text/html HyperText Markup Language
*.jp2 image/jp2 JPEG-
*.jpe image/jpeg JPEG
*.jpeg image/jpeg JPEG
*.jpg image/jpeg JPEG
*.js text/javascript, application/javascript JavaScript
*.json application/json JavaScript Object Notation
*.mp2 audio/mpeg, video/mpeg MPEG Audio/Video Stream, Layer II
*.mp3 audio/mpeg MPEG Audio Stream, Layer III
*.mp4 audio/mp4, video/mp4 MPEG- Audio/Video
*.mpeg video/mpeg MPEG Video Stream, Layer II
*.mpg video/mpeg MPEG Video Stream, Layer II
*.mpp application/vnd.ms-project MS Project Project
*.ogg application/ogg, audio/ogg Ogg Vorbis
*.pdf application/pdf Portable Document Format
*.png image/png Portable Network Graphics
*.pot application/vnd.ms-powerpoint MS PowerPoint Template
*.pps application/vnd.ms-powerpoint MS PowerPoint Slideshow
*.ppt application/vnd.ms-powerpoint MS PowerPoint Presentation
*.rtf application/rtf, text/rtf Rich Text Format
*.svf image/vnd.svf Simple Vector Format
*.tif image/tiff Tagged Image Format File
*.tiff image/tiff Tagged Image Format File
*.txt text/plain Plain Text
*.wdb application/vnd.ms-works MS Works Database
*.wps application/vnd.ms-works Works Text Document
*.xhtml application/xhtml+xml Extensible HyperText Markup Language
*.xlc application/vnd.ms-excel MS Excel Chart
*.xlm application/vnd.ms-excel MS Excel Macro
*.xls application/vnd.ms-excel MS Excel Spreadsheet
*.xlt application/vnd.ms-excel MS Excel Template
*.xlw application/vnd.ms-excel MS Excel Workspace
*.xml text/xml, application/xml Extensible Markup Language
*.zip aplication/zip Compressed Archive

上传文件时文件类型限制 <input id="File1" type="file" accept=""/>的更多相关文章

  1. IE8上传文件时文件本地路径变成"C:\fakepath\"的问题

    转自:http://yunzhu.iteye.com/blog/1116893 在使用<input id="file_upl" type="file" / ...

  2. springMVC从上传的Excel文件中读取数据

    示例:导入客户文件(Excle文件) 一.编辑customer.xlsx 二.在spring的xml文件设置上传文件大小 <!-- 上传文件拦截,设置最大上传文件大小 10M=10*1024*1 ...

  3. HTML5文件上传器,纯脚本无插件的客户端文件上传器---Uploader 文件上传器类

    概述 客户端完全基于JavaScript的 浏览器文件上传器,不需要任何浏览器插件,但需要和jQuery框架协同工作,支持超大文件上传,其算法是将一个超大文件切片成N个数据块依次提交给服务 端处理,由 ...

  4. struts2:上传多个文件时实现带进度条、进度详细信息的示范

    上一篇文章讲了上传单个文件与上传多个文件(属性驱动)的例子.本例是上传多个文件(属性驱动),并且显示进度条.进度详细信息的示范. 在文件上传选择界面,允许用户增加.删除选择的文件,且只能上传指定类型的 ...

  5. 单个input框上传多个文件操作

    HTML页面: <div class="form-group thumb"> <label class="control-label col-xs-12 ...

  6. MVC文件上传 - 使用jquery异步上传并客户端验证类型和大小

    本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...

  7. MVC文件上传01-使用jquery异步上传并客户端验证类型和大小

    本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...

  8. 使用html中的<input>标签上传多个文件(转)

    如何使用html上传多个文件呢?我搜索中文怎么也找不到合适的,都是用js动态添加input,然后提交,不能满足我想要的——打开选择文件的窗口后可以一次性选择多个文件. 然后我尝试搜索英文"h ...

  9. input type="file" accept="image/*"上传文件慢的问题解决办法

    相信大家都写过<input type="file" name="file" class="element" accept=" ...

随机推荐

  1. USACO 2.2 Runaround Numbers

    Runaround Numbers Runaround numbers are integers with unique digits, none of which is zero (e.g., 81 ...

  2. 35.QT蝴蝶飞舞

    fly.h #ifndef FLY_H #define FLY_H #include <QObject> #include <QPainter> #include <QG ...

  3. BZOJ 3238 后缀数组+单调栈

    单调栈跑两遍求出来 ht[i]为最小值的那段区间 //By SiriusRen #include <cstdio> #include <cstring> #include &l ...

  4. Combox程序中自定义数据源

    有combox控件,命名为cbxPutStatus,在程序中为其手工定义数据源,并绑定 private void POrderSplitFrm_Load(object sender, EventArg ...

  5. ifame子页实现父页面刷新(或跳转到指定页面)

    <script>parent.location.replace('../D_DailyManager/Add.aspx?id=" + x + "');</scri ...

  6. Android 制作类似支付圆圈和打钩界面ProgressWheel

    首先要说明的是,制作圆圈旋转的效果并不是博主做的,是参照了github上的一个代码,只是在上面添加了修改,对其优化并增加了一个打钩的动画. 先来看下效果,1+的手机获取root权限真是难,没法录屏,只 ...

  7. 关于idlf无法输入中文的解决办法

    最近在学习python 但是刚开始写程序的时候发现无法输入中文  上网查发现有不少mac端的IDLF也存在这个问题 导致这个问题的原因可能不唯一 但是大多数原因应该是Mac 系统自带的 Tcl/Tk ...

  8. WinDebug使用

    File->Symbol File Path-> SRV*C:\MyLocalSymbols*http://msdl.microsoft.com/download/symbols     ...

  9. 话说普通的TPlink ip地址是192.168.1.2 在LAN里有台电脑共享打印机 ip 是192.168.0.2 计算机名为j02 然后我把这台电脑加到DMZ里,让根路由器同一网段的可以访问 但添加打印机的时候 提示 计算机名重复 后来在需要添加打印机电脑的hosts文件里加了 192.168.1.2 j02 式了一样不行 话说,这个打印机该怎么添加

    开启端口映射,从外网访问内网的文件共享: 已经在路由器里开了远端WEB管理设了端口,另外端口映射局域网里的一台电脑,比如WEB端口设的是8080,映射192.168.1.100到4877端口,现在我想 ...

  10. [中文] 以太坊(Ethereum )白皮书

    以太坊(Ethereum ):下一代智能合约和去中心化应用平台 翻译|巨蟹 .少平 译者注|中文读者可以到以太坊爱好者社区(www.ethfans.org)获取最新的以太坊信息. 当中本聪在2009年 ...