input file HTML控件控制
网页上添加一个input file HTML控件:
|
1
|
<input id="File1" type="file" /> |
默认是这样的,所有文件类型都会显示出来,如果想限制它只显示我们设定的文件类型呢,比如“word“,”excel“,”pdf“文件

解决办法是可以给它添加一个accept属性,比如:
|
1
|
<input id="File1" type="file" accept=".xls,.doc,.txt,.pdf" /> |
这样选择的时候默认会显示为这样:

文件选择框内只显示出你自定义文件类型的文件,也还比较方便。
But,这只是最简单的掩人耳目的做法,还是能选择其它文件类型:

所以,如果要做到真正意义上限制类型做法(其实这种算不上限制,只是把你要的文件类型默认显示出来而已,并不是说不能选择其它的),还是要通过js或者后台来控制。
附支持的文件类型:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
*.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 file HTML控件控制的更多相关文章
- input绑定datapicker控件后input再绑定blur或者mouseout等问题
input绑定datapicker控件后input再绑定blur或者mouseout等问题 问题描述:今天在修改一个东西的时候需要给一个input输入域绑定blur事件,从而当它失去焦点后动态修改其中 ...
- HTML5: input:file上传类型控制
ylbtech-HTML5: input:file上传类型控制 1. 一.input:file 属性返回顶部 一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的 ...
- HTML5的 input:file上传类型控制(转载)
http://www.haorooms.com/post/input_file_leixing HTML5的 input:file上传类型控制 2014年8月29日 66352次浏览 一.input: ...
- C# MVC(File)控件多张图片上传加预览
刚来公司实习,老板叫我写一个积分商城网站.用的是公司的框架结构搭建的后台,所以后台的图片上传不需要自己写.但是前台的评价图片就需要自己手写了,在网上找了很多代码发现都用不了.问了很多人也都没有实现! ...
- Jquery给input[type=radio] 控件赋值
setobject: function (data, scope, win) { //data jsoon数据, scope,一般为form的id,win 窗口对象,如果在当前window win=n ...
- HTML5的 input:file上传类型控制
一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文 ...
- FlowLayoutPanel控件控制里面子控件换行
// 摘要: // 设置值,该值表示的流中断设置 System.Windows.Forms.FlowLayoutPanel 控件. // // 参数: // control: // 子控件. // / ...
- 有关图片上传的相关知识input type=file,HTML5的 input:file上传类型控制
遇到项目,要求做一个影像系统,对于前端开发需要了解file的相关属性,以及如何开发.工欲善其事,必先利器嘛.度娘一阵子搜索,找资料.这年头,需要的是你解决问题的能力啊! 参考应用:https://ww ...
- 给input的按钮控件添加onserverclick事件
前台: <input type="button" value="登录" id="login" onclick="" ...
随机推荐
- python 比较数字大小按从大到小输出
主要用到的python 的知识点 1: 内置函数max 2: 列表的操作 3: while 循环 4 : 错误处理 代码如下: #!/usr/bin/python #coding=u ...
- 洛谷 P1373 小a和uim之大逃离 (差值型dp总结)
这道题和多米诺骨牌那道题很像 ,都是涉及到差值的问题. 这道题是二维的,同时要取模. 这种题,因为当前的决策有后效性,会影响到差值,所以直接把 差值作为维度,然后计算答案的时候把差值为0的加起来就行了 ...
- 【BZOJ 1207】[HNOI2004]打鼹鼠
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 时间是按顺序的. 所以就有单调性啦. 写个DP就好. 设f[i]表示打第i只鼹鼠,最多能打几只鼹鼠. 则如果i和j的距离不超过它们的 ...
- windos环境python3.5安装 paramiko
一.执行命令pip install paramiko,情况如下: C:\Users\ZFH>pip install paramikoCollecting paramiko Downloadin ...
- Qt之QNetworkProxy(网络代理)
简述 QNetworkProxy类提供了一个网络层代理. QNetworkProxy提供了配置网络层代理支持Qt网络类的方法.目前支持的类有QAbstractSocket.QTcpSocket.QUd ...
- spark一些入门资料
spark一些入门资料 A Scala Tutorial for Java Programmers http://docs.scala-lang.org/tutorials/scala-for-jav ...
- MYSQL学习笔记三:日期和时间函数
MYSQL学习笔记三:日期和时间函数 1. 获取当前日期的函数和获取当前时间的函数 /*获取当前日期的函数和获取当前时间的函数.将日期以'YYYY-MM-DD'或者'YYYYMMDD'格式返回 */ ...
- <九度 OJ>题目1545:奇怪的连通图
题目描写叙述: 已知一个无向带权图,求最小整数k.使仅使用权值小于等于k的边,节点1能够与节点n连通. 输入: 输入包括多组測试用例.每组測试用例的开头为一个整数n(1 <= n <= 1 ...
- eclipse:报错信息The superclass “javax.servlet.http.HttpServlet” was not found on the Java Build Path
JavaWeb: 报错信息The superclass "javax.servlet.http.HttpServlet" was not found on the Java Bui ...
- Automation testing tool comparison - UFT & CodedUITest
Ease of Use - Recording and Playback Functionality UFT provides 4 models to record a new test. Norma ...