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="" ...
随机推荐
- Ubuntu16.04 lnmp 环境搭建
Ubuntu16.04 lnmp 环境搭建 nginx 安装 sudo apt-add-repository ppa:nginx/stablesudo apt-add-repository ppa:o ...
- win10 64位下VirtualBox安装CentOS6.9
第一步:安装VritualBox 百度“VritualBox”下载安装即可: 第二步:下载Linux镜像系统并安装 这里写出我参照的博客,很详细,我就不累赘了! 原文地址:http://blog.cs ...
- OpenJDK源码研究笔记(四)-编写和组织可复用的工具类和方法
本篇主要讲解java.util.Arrays这个针对数组的工具类. 1.可复用的工具类和方法. 这个工具类里,包含很多针对数组的工具方法,如 排序.交换.二分查找.比较.填充.复制.hashcode ...
- Regular Expressions Syntax
https://support.syslogwatcher.com/support/solutions/articles/8000033627-regular-expressions-syntax
- 逆向project第003篇:跨越CM4验证机制的鸿沟(上)
一.前言 <冠军足球经理>系列作为一款拟真度极高的足球经营类游戏.赢得过无数赞誉,而CM4可以说是这个传奇的起点. 可是在游戏安装过程中.当用户输入完序列号之后.程序并不会对用户的输入进行 ...
- MongoDB count distinct group by JavaAPI查询
import java.net.UnknownHostException; import com.mongodb.BasicDBList; import com.mongodb.BasicDBObje ...
- 支持并发的httpclient(基于tcp连接池以及netty)
闲来无事,将曾经自己写的一个库放出来吧. . 有的时候会有这样子的需求: (1)serverA通过HTTP协议来訪问serverB (2)serverA可能会并发的像B发送非常多HTTP请求 类似于上 ...
- bzoj1055: [HAOI2008]玩具取名(dp)
1055: [HAOI2008]玩具取名 题目:传送门 简要题意: 就是固定四个字母,给出这四个字母分别可以由哪两个字母组成,然后在给你一个字符串,要求把这个字符串还原成原始的四个字母的其中一个. 题 ...
- lucene LZ4 会将doc存储在一个chunk里进行Lz4压缩 ES的_source便如此
默认情况下,Elasticsearch 用 JSON 字符串来表示文档主体保存在 _source 字段中.像其他保存的字段一样,_source 字段也会在写入硬盘前压缩.The _source is ...
- java9新特性-16-Deprecated的相关API
1.官方Feature 211: Elide Deprecation Warnings on Import Statements 214: Remove GC Combinations Depreca ...