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说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为 ...
随机推荐
- 过滤器filters
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- 2019牛客暑假多校赛（第二场） F和H（单调栈）
F-Partition problem https://ac.nowcoder.com/acm/contest/882/F 题意:输入一个数n,代表总共有2n个人,然后每个人对所有人有个贡献值,然后问 ...
- 设置和修改Linux的swap分区大小
在Linux编译gcc时,遇到编译错误,究其根源是因为内存不足,这时通过修改swap大小解决了问题 相关操作如下: 1. 查看当前分区情况free -m 2. 增加 swap 大小, 2G 左右dd ...
- Python学习day23-面向对象的编程
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- 01_jQuery初识
1.为什么要学习jQuery?做同样的事情,jQuery写起来极其简练(write less , do more) 2.jQuery是什么?jQuery相当于Python的第三方模块,原生JS DOM ...
- Lua程序设计之数值
(摘自Lua程序设计) 数值常量 从Lua5.3版本开始Lua语言为数值格式提供了两种选择:被称为integer的64位整形和被称为float的双精度浮点类型(注意,"float" ...
- 测试是否是移动端，是否是iphone，是否是安卓
function isMobile(){ return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(na ...
- Django项目：CRM(客户关系管理系统)--61--51PerfectCRM实现CRM客户报名流程学生合同上传照片
# sales_views.py # ————————47PerfectCRM实现CRM客户报名流程———————— from django.db import IntegrityError # 主动 ...
- 打包成exe可执行文件的方法
Python安装扩展库与打包成exe可执行文件的方法 1.安装扩展库的几种方法. 首先可能需要使用 pip install --upgrade pip 来升级本机的pip程序.然后在命令提示符环境(即 ...
- ongl与Struts标签
一.ONGL OGNL 的全称是“Object-Graph Navigation Language”,即对象图导航语言,它是一种功能强大的开源表达式语言.使用这种表达式语言可以通过某种表达式语法存取 ...