input 限制 上传文件类型
网页上添加一个input file HTML控件:
<input id="File1" type="file" />
默认是这样的,所有文件类型都会显示出来,如果想限制它只显示我们设定的文件类型呢,比如“word“,”excel“,”pdf“文件
解决办法是可以给它添加一个accept属性,比如:
<input id="File1" type="file" accept=".xls,.doc,.txt,.pdf" /> <!-- 或者: -->
<input id="File1" type="file" accept="image/*" />
<!-- 或者: -->
<input id="File1" type="file" accept="image/png,image/gif" />
这样选择的时候默认会显示为这样:
文件选择框内只显示出你自定义文件类型的文件,也还比较方便。
But,这只是最简单的掩人耳目的做法,还是能选择其它文件类型:
所以,如果要做到真正意义上限制类型做法(其实这种算不上限制,只是把你要的文件类型默认显示出来而已,并不是说不能选择其它的),还是要通过js或者后台来控制。
附支持的文件类型:
*.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-2000
*.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-4 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 限制 上传文件类型的更多相关文章
- 在HTML5的 input:file 上传文件类型控制 遇到的问题
1.input:file 属性的介绍 先瞅代码吧 <form> <input type="file" name="pic" accept=& ...
- input:file上传文件类型(记录)
imput 属性有以下几种: 1.type:input类型这就不多说了2.accept:表示可以选择的文件类型,多个类型用英文逗号分开,常用的类型见下表. <input id="fil ...
- input file 上传文件类型控制
文件类型 accept *.3gpp audio/3gpp, video/3gpp.ac3 audio/ac3.asf allpication/vnd.ms-asf.au audio/basic.cs ...
- HTML5中的input type为file控件限制上传文件类型及扩展
简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" na ...
- input file标签限制上传文件类型
用 input 的file类型标签上传文件,有时需要限制上传文件类型,添加accept属性可以实现 <input type="file" accept="image ...
- input type='file'限制上传文件类型
前端与后台数据进行对接时,就避免不了要使用ajax进行http请求,常用的请求就两个post与get:然而常见的post请求的需求是文件上传,可能我一说到文件上传大家都觉得so easy啊,没什么嘛 ...
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- Struts2框架下的文件上传文件类型、名称约定
Struts2框架下的文件上传机制:1.通过multipart/form-data form提交文件到服务器2.文件名是通过什么地方设置的?在strust2的FileUploadInterceptor ...
- h5属性直接控制上传文件类型
和公司前端交互的时候发现我在选择上传文件的时候只能选择图片,其他类型,text,doc等等等等全部无法选择 仔细查看了下代码,发现归功于H5新增(??没查到资料,不确定是不是H5的)的input属性 ...
随机推荐
- java基础---数组的查找算法(2)
一.查找的基本概念 查找分为有序查找和无序查找,这里均以数组为对象,有序查找指的是数组元素有序排列,无序查找指的是数组元素有序或无序排列 平均查找长度(Average Search Length,AS ...
- 题解 guP4552 IncDec Sequence
这道题是一道差分的题目 差分数组p即p[i]=a[i]-a[i-1] 如果我们把一个区间[l,r]里的数+1,那么我们不难发现p[l]'=a[l]+1-a[l-1]=p[l]+1,p[r+1]'=a[ ...
- python使用笔记008-模块
模块的原理: 1.就是一个python文件 2.标准模块是python自带的 3.第三方模块需要自己安装 导入模块的顺序: 1.从当前目录下找 2.从python的环境变量中找 一.自己定义的模块 1 ...
- C语言:编译具体过程及隐藏
对于平常应用程序的开发,很少有人会关注编译和链接的过程,因为我们使用的工具一般都是流行的集成开发环境(IDE),比如 Visual Studio.Dev C++.C-Free 等.这些功能强大的 ID ...
- iframe跨域访问出现的cookie问题,提供两种解决方案
最近在java项目对接时出现的一个问题.A系统嵌入B系统页面时,使用iframe去嵌入B系统页面丢失sessionid,导致B系统认为是未进行登录的请求,从而跳转到了B系统登录页. 解决方法查看此博客 ...
- [刘阳Java]_SpringMVC文件上传第1季_第10讲
今天来介绍一个关于SpringMVC框架的文件上传功能.首先我个人感觉SpringMVC框架的文件上传还是要比Struts2框架要好用一些,灵活性更强.因为SpringMVC框架的文件上传有几种不同的 ...
- Quick BI的复杂系统为例:那些年,我们一起做过的性能优化
背景 一直以来,性能都是技术层面不可避开的话题,尤其在中大型复杂项目中.犹如汽车整车性能,追求极速的同时,还要保障舒适性和实用性,而在汽车制造的每个环节.零件整合情况.发动机调校等等,都会最终影响用户 ...
- 【剑指offer】05. 替换空格
剑指 Offer 05. 替换空格 知识点:: 题目描述 请实现一个函数,把字符串 s 中的每个空格替换成"%20". 示例 输入:s = "We are happy.& ...
- this的四种用法!
经常会有人问到this的用法,其实简单来说,this有四种应用场景,分别是在构造函数上.对象属性中.普通函数中.call和apply方法中. 首先我们来看第一种:在构造函数中的用法 第二种是在在对象属 ...
- 【剑指offer】55 - I. 二叉树的深度
剑指 Offer 55 - I. 二叉树的深度 知识点:二叉树,递归 题目描述 输入一棵二叉树的根节点,求该树的深度.从根节点到叶节点依次经过的节点(含根.叶节点)形成树的一条路径,最长路径的长度为树 ...