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说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为 ...
随机推荐
- Mac下使用Pecl安装PHP的Swoole扩展实践
一.背景 前段时间把Mac系统重装了,PHP的一些扩展都没了,昨天需要调试一个swoole开发的项目,发现命令行中的PHP是系统自带的,如果安装swoole扩展很不方便:需要自己手动去下载swoole ...
- jqGrid的subGrid子表格
使用完整jqGrid作为子表格 使用子表格,涉及到jqGrid的三个选项: subGrid :首先必须将jqGrid的subGrid选项设置为true,默认为false:当此项设为true的时候,Gr ...
- springboot思维导图
- 牛客网暑期ACM多校训练营（第一场）菜鸟补题QAQ
签到题 J Different Integers(树状数组) 题目大意:给一个长为n的数组,每一个询问给两个数字i, j ,询问1~i, j~n这两个区间中有多少不同的数字,真的像是莫队裸题,但是两个 ...
- phpmyadmin连接远程mysql
phpmaadmin连接远程mysql连接远程mysql步骤.保证已经有�phpmyadmin,如果没有,去http://www.phpmyadmin.net/home_page/downloads. ...
- std::unique_lock与std::lock_guard区别示例
std::lock_guard std::lock_guard<std::mutex> lk(frame_mutex); std::unique_lock<std::mutex> ...
- 洛谷P3747 [六省联考2017]相逢是问候
传送门 题解 扩展欧拉定理. 线段树维护,已经全改到底了的节点就不管,不然暴力修改下去. //Achen #include<algorithm> #include<iostream& ...
- SDF与MDF的区别
标签: 杂谈 数据库扩展名为.sdf,是一个基于sql server compact edition的数据库文件,不需要安装SQL Server就可以用 基于服务的数据库扩展名为.mdf,是基于S ...
- 约束布局ConstraintLayout加快布局速度
Android Studio2.2更新布局设计器,同时,引人了约束布局ConstraintLayout. 简单来说,可以把它看做是相对布局的升级版本,但是区别与相对布局更加强调约束.何为约束,即控件之 ...
- 使用内部Servlet转发JSP后页面的JS,CSS等资源引入问题的解决
转载自:https://blog.csdn.net/weixin_44353336/article/details/90677792 问题原因 我们在进行web项目开发过程中,经常会在web页面引入一 ...