正文
上传文件时文件类型限制 <input id="File1" type="file" accept=""/>
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
在做项目项目中经常需要上传文件，类型也就那几种。虽然在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=""/>的更多相关文章- IE8上传文件时文件本地路径变成";C:\fakepath\";的问题
转自:http://yunzhu.iteye.com/blog/1116893 在使用<input id="file_upl" type="file" / ...
- springMVC从上传的Excel文件中读取数据
示例:导入客户文件(Excle文件) 一.编辑customer.xlsx 二.在spring的xml文件设置上传文件大小 <!-- 上传文件拦截,设置最大上传文件大小 10M=10*1024*1 ...
- HTML5文件上传器，纯脚本无插件的客户端文件上传器---Uploader 文件上传器类
概述 客户端完全基于JavaScript的 浏览器文件上传器,不需要任何浏览器插件,但需要和jQuery框架协同工作,支持超大文件上传,其算法是将一个超大文件切片成N个数据块依次提交给服务 端处理,由 ...
- struts2：上传多个文件时实现带进度条、进度详细信息的示范
上一篇文章讲了上传单个文件与上传多个文件(属性驱动)的例子.本例是上传多个文件(属性驱动),并且显示进度条.进度详细信息的示范. 在文件上传选择界面,允许用户增加.删除选择的文件,且只能上传指定类型的 ...
- 单个input框上传多个文件操作
HTML页面: <div class="form-group thumb"> <label class="control-label col-xs-12 ...
- MVC文件上传 - 使用jquery异步上传并客户端验证类型和大小
本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...
- MVC文件上传01-使用jquery异步上传并客户端验证类型和大小
本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...
- 使用html中的<;input>;标签上传多个文件(转)
如何使用html上传多个文件呢?我搜索中文怎么也找不到合适的,都是用js动态添加input,然后提交,不能满足我想要的——打开选择文件的窗口后可以一次性选择多个文件. 然后我尝试搜索英文"h ...
- input type=";file"; accept=";image/*";上传文件慢的问题解决办法
相信大家都写过<input type="file" name="file" class="element" accept=" ...
随机推荐- [LeetCode] Paint House 粉刷房子
There are a row of n houses, each house can be painted with one of the three colors: red, blue or gr ...
- myeclipse下构建maven web项目
首先创建一个Maven的Project如下图 我们勾选上Create a simple project (不使用骨架) 这里的Packing 选择 war的形式 由于packing是war包,那么下面 ...
- 336-Palindrome Pairs
336-Palindrome Pairs Given a list of unique words, find all pairs of distinct indices (i, j) in the ...
- [慢查优化]联表查询注意谁是驱动表 &; 你搞不清楚谁join谁更好时请放手让mysql自行判定
写在前面的话: 不要求每个人一定理解 联表查询(join/left join/inner join等)时的mysql运算过程: 不要求每个人一定知道线上(现在或未来)哪张表数据量大,哪张表数据量小: ...
- mysql fetch 系列函数
浏览器输出内容同上. 当使用 MYSQL_BOTH 或省略该参数是,将同时具有 MYSQL_NUM 与 MYSQL_ ASSOC 的特性. MySQL mysql_fetch_array 函数取得查询 ...
- 时间格式nls_date_format的设置
nls_date_format参数用于设置日期显示格式,设置的方式有多种,不同的方式也会带来不同的结果.参数的设置是有优先级的,日期格式的参数设置也不例外.优先级如下(低到高):初始化参数 < ...
- C#中（int）、Conver.Toint32()、int.Parse()三种类型转换方式的区别与联系--C#基础知识
自己刚学习C#,总结了一些知识,想分享给大家.毕竟刚学习这门语言,学得不深,如果哪里有错误,请帮忙指出一下哈,谢谢! 1.(int)可用于单精度.双精度等其他数值类型的转换(到整型int),不能用于转 ...
- CentOS7.4下的 JDK1.8 安装
一.卸载老的JDK 如果需要卸载OpenJDK,执行以下操作: [root@localhost ~]# rpm -e --nodeps tzdata-java-2014i-1.el7.noarch[r ...
- 1896 互不侵犯 洛谷 luogu
题目描述 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. 注:数据有加强(2018/4/25) ...
- C++进阶--拥有资源句柄的类(浅拷贝，深拷贝，虚构造函数)
// Person通过指针拥有string class Person { public: Person(string name) { pName_ = new string(name); } ~Per ...
*.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
- IE8上传文件时文件本地路径变成";C:\fakepath\";的问题
转自:http://yunzhu.iteye.com/blog/1116893 在使用<input id="file_upl" type="file" / ...
- springMVC从上传的Excel文件中读取数据
示例:导入客户文件(Excle文件) 一.编辑customer.xlsx 二.在spring的xml文件设置上传文件大小 <!-- 上传文件拦截,设置最大上传文件大小 10M=10*1024*1 ...
- HTML5文件上传器，纯脚本无插件的客户端文件上传器---Uploader 文件上传器类
概述 客户端完全基于JavaScript的 浏览器文件上传器,不需要任何浏览器插件,但需要和jQuery框架协同工作,支持超大文件上传,其算法是将一个超大文件切片成N个数据块依次提交给服务 端处理,由 ...
- struts2：上传多个文件时实现带进度条、进度详细信息的示范
上一篇文章讲了上传单个文件与上传多个文件(属性驱动)的例子.本例是上传多个文件(属性驱动),并且显示进度条.进度详细信息的示范. 在文件上传选择界面,允许用户增加.删除选择的文件,且只能上传指定类型的 ...
- 单个input框上传多个文件操作
HTML页面: <div class="form-group thumb"> <label class="control-label col-xs-12 ...
- MVC文件上传 - 使用jquery异步上传并客户端验证类型和大小
本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...
- MVC文件上传01-使用jquery异步上传并客户端验证类型和大小
本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...
- 使用html中的<;input>;标签上传多个文件(转)
如何使用html上传多个文件呢?我搜索中文怎么也找不到合适的,都是用js动态添加input,然后提交,不能满足我想要的——打开选择文件的窗口后可以一次性选择多个文件. 然后我尝试搜索英文"h ...
- input type=";file"; accept=";image/*";上传文件慢的问题解决办法
相信大家都写过<input type="file" name="file" class="element" accept=" ...
随机推荐- [LeetCode] Paint House 粉刷房子
There are a row of n houses, each house can be painted with one of the three colors: red, blue or gr ...
- myeclipse下构建maven web项目
首先创建一个Maven的Project如下图 我们勾选上Create a simple project (不使用骨架) 这里的Packing 选择 war的形式 由于packing是war包,那么下面 ...
- 336-Palindrome Pairs
336-Palindrome Pairs Given a list of unique words, find all pairs of distinct indices (i, j) in the ...
- [慢查优化]联表查询注意谁是驱动表 &; 你搞不清楚谁join谁更好时请放手让mysql自行判定
写在前面的话: 不要求每个人一定理解 联表查询(join/left join/inner join等)时的mysql运算过程: 不要求每个人一定知道线上(现在或未来)哪张表数据量大,哪张表数据量小: ...
- mysql fetch 系列函数
浏览器输出内容同上. 当使用 MYSQL_BOTH 或省略该参数是,将同时具有 MYSQL_NUM 与 MYSQL_ ASSOC 的特性. MySQL mysql_fetch_array 函数取得查询 ...
- 时间格式nls_date_format的设置
nls_date_format参数用于设置日期显示格式,设置的方式有多种,不同的方式也会带来不同的结果.参数的设置是有优先级的,日期格式的参数设置也不例外.优先级如下(低到高):初始化参数 < ...
- C#中（int）、Conver.Toint32()、int.Parse()三种类型转换方式的区别与联系--C#基础知识
自己刚学习C#,总结了一些知识,想分享给大家.毕竟刚学习这门语言,学得不深,如果哪里有错误,请帮忙指出一下哈,谢谢! 1.(int)可用于单精度.双精度等其他数值类型的转换(到整型int),不能用于转 ...
- CentOS7.4下的 JDK1.8 安装
一.卸载老的JDK 如果需要卸载OpenJDK,执行以下操作: [root@localhost ~]# rpm -e --nodeps tzdata-java-2014i-1.el7.noarch[r ...
- 1896 互不侵犯 洛谷 luogu
题目描述 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. 注:数据有加强(2018/4/25) ...
- C++进阶--拥有资源句柄的类(浅拷贝，深拷贝，虚构造函数)
// Person通过指针拥有string class Person { public: Person(string name) { pName_ = new string(name); } ~Per ...
There are a row of n houses, each house can be painted with one of the three colors: red, blue or gr ...
首先创建一个Maven的Project如下图 我们勾选上Create a simple project (不使用骨架) 这里的Packing 选择 war的形式 由于packing是war包,那么下面 ...
336-Palindrome Pairs Given a list of unique words, find all pairs of distinct indices (i, j) in the ...
写在前面的话: 不要求每个人一定理解 联表查询(join/left join/inner join等)时的mysql运算过程: 不要求每个人一定知道线上(现在或未来)哪张表数据量大,哪张表数据量小: ...
浏览器输出内容同上. 当使用 MYSQL_BOTH 或省略该参数是,将同时具有 MYSQL_NUM 与 MYSQL_ ASSOC 的特性. MySQL mysql_fetch_array 函数取得查询 ...
nls_date_format参数用于设置日期显示格式,设置的方式有多种,不同的方式也会带来不同的结果.参数的设置是有优先级的,日期格式的参数设置也不例外.优先级如下(低到高):初始化参数 < ...
自己刚学习C#,总结了一些知识,想分享给大家.毕竟刚学习这门语言,学得不深,如果哪里有错误,请帮忙指出一下哈,谢谢! 1.(int)可用于单精度.双精度等其他数值类型的转换(到整型int),不能用于转 ...
一.卸载老的JDK 如果需要卸载OpenJDK,执行以下操作: [root@localhost ~]# rpm -e --nodeps tzdata-java-2014i-1.el7.noarch[r ...
题目描述 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. 注:数据有加强(2018/4/25) ...
// Person通过指针拥有string class Person { public: Person(string name) { pName_ = new string(name); } ~Per ...
