HTML input type=file文件选择表单的汇总（二）
1. 原生file input大小、按钮文字等UI自定义
元素input的原生样式，不是太好看：
有一种方法是这样的：
让file类型的元素透明度0，覆盖在我们好看的按钮上。然后我们去点击好看的按钮，实际上点击是是file元素。
然而，此方法有一些不足：
- 尺寸控制不灵活。然后高度控制也不精准，我们很难正好覆盖在好看的自定义按钮上。
- 样式不好控制，按钮的
hover态以及active态不好处理。 - HTML结构限制以及定位成本。
更好的方法是，使用label元素与file控件关联，好处在于：
- 点击自定义的漂亮按钮就是点击我们file控件；
- 没有尺寸控制不精确的问题；
- 没有不能响应hover态active态的问题；
- 我们的漂亮按钮甚至可以在form表单元素的外面
代码如下：
<style>
.ui_button {
padding:10px;
background: #01AAED;
color: #fff;
}
.ui_button:hover {
opacity: 0.9;
}
</style>
<body>
<form>
<label class="ui_button" for="xFile">上传文件</label>
<input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);">
<span>文件以.video结尾</span>
</form>
</body>
样式如下：
2. file类型控件的accept属性
input file类型控件有一个属性，名为accept,可以用来指定浏览器接受的文件类型.
如果是上传图片，可以使用：
上传视频类型，可以使用：
如果是其他类型的：可以参考下：
然后，多个属性值使用逗号分隔，例如：
input file只选择文件夹而不是文件
试试下面的代码，测试了下，Chrome浏览器下是可以的，Firefox浏览器下也是可以的，safari和IE目前还不行，有兼容性问题。
HTML input type=file文件选择表单的汇总（二）的更多相关文章
- HTML input type=file文件选择表单的汇总（一）
HTML input type=file 在onchange上传文件的过程中,遇到同一个文件二次上传无效的问题. 最近在做项目过程中,遇到同一文件上传的时候,二次上传没有效果,找了资料,找到了原因: ...
- input type=file文件选择表单元素二三事
一.原生input上传与表单form元素 如果想使用浏览器原生特性实现文件上传(如图片)效果,父级的form元素有个东西不能丢,就是: enctype="multipart/form-dat ...
- type=file 文件修改表单 名称不能正常回显的问题
easyui 框架下 代码如下: css: .file_box{ float: right; width: 1035px; border: 1px solid #999; height: 32p ...
- C# 模拟提交带附件（input type=file）的表单
今天调用某API时,对于文档中的传入参数:File[] 类型,感觉很陌生,无从下手! 按通常的方式在json参数中加入file的二进制数据提交,一直报错(参数错误)!后来经过多方咨询,是要换一种 表单 ...
- input type="file"文件上传到后台读取
html页面(表单采用bootStrap) js部分: //更换头像时把上传的图片post方式到控制器 <script type="text/javascript"> ...
- <input type="file">文件上传
<input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascript 的 File API 对文件进行操作 . 常用i ...
- js 实现 input type="file" 文件上传示例代码
在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...
- [置顶] js 实现 <input type="file" /> 文件上传
在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...
- javascript input type=file 文件上传
在JS中,input type=file 是常用的文件上传API,但感觉W3C说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为 ...
随机推荐
- Everything-启用http服务器（公网IP）会导致共享文件被搜索引擎搜索
1. 漏洞利用成功的前提 公网ip 启用http服务器 2.产生原因 启用http服务器功能点:让用户在本地或局域网上的其他电脑使用浏览器进行搜索,并支持文件下载.若拥有公网IP的用户启用此功能,就是 ...
- Netty SimpleChannelInboundHandler和ChannelInboundHandler区别
一般用netty来发送和接收数据都会继承SimpleChannelInboundHandler和ChannelInboundHandlerAdapter这两个抽象类,那么这两个到底有什么区别呢? 在客 ...
- Python学习day40-并发编程(终)
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- 不小心使用vcpkg之后再使用conan，一直报链接错误
原来是使用vcpkg的时候,不小心使用了.\vcpkg integrate install命令,把vcpkg到所有的vs项目(这个不需要什么其他的引用,但是容易起冲突) 然后卸载掉就好了,这篇文章真是 ...
- JPA、Hibernate、Spring data jpa之间的关系
什么么是JPA? 全称Java Persistence API,可以通过注解或者XML描述[对象-关系表]之间的映射关系,并将实体对象持久化到数据库中. 为我们提供了: 1)ORM映射元数据:JPA支 ...
- vue:element-ui输入框绑定回车事件
参考: https://segmentfault.com/q/1010000011347642 https://weiku.co/article/297/ vue监听input输入框的回车事件:key ...
- 目标检测从入门到精通—SPP-Net详细解析（三）
SPP-Net网络结构分析 Author:Mr. Sun Date:2019.03.18 Loacation: DaLian university of technology 论文名称:<Spa ...
- 廖雪峰Java10加密与安全-4加密算法-4密钥交换算法
1DH算法 1.1.原根公式:g^i mod P 条件:1<g<P,0<i<P 原根:介于[1, p-1]之间的任意2个数i,j(p为素数,i≠j)的结果不相等,即 g^i m ...
- __name__变量
再写项目过程中,将功能函数写在 if __name=="__main__":之外,执行代码写在之中,如下:如果在foo模块打印__name__为__main__,而如果在bin模 ...
- xshell评,xftp估过期解决办法
去官网 xshell:https://www.netsarang.com/download/down_form.html?code=522 xftp:https://www.netsarang.com ...