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说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为 ...
随机推荐
- HDU--2126 Buy the souvenirs（二维01背包）
题目http://acm.hdu.edu.cn/showproblem.php?pid=2126 分析:有两个要求,一是计算最多可以选多少中纪念品:而是计算选最多纪念品的方案有多少种, 即统计最优方案 ...
- Shield 安装与配置
Shield 安装与配置 https://www.elastic.co/guide/en/shield/shield-1.3/introduction.html 一.简介 Shield是Elas ...
- commons-httpclient和org.apache.httpcomponents的区别
<dependency> <groupId>commons-httpclient</groupId> <artifactId>commons-httpc ...
- react使用swiper,解决添加点击事件首位图片点击失效，解决轮播按钮被覆盖问题
JS部分 createSwiper1() { var option = { // slidesPerView: 5, slidesPerView: 3, centeredSlides:true, }; ...
- [编织消息框架][netty源码分析]11 ByteBuf 实现类UnpooledHeapByteBuf职责与实现
每种ByteBuf都有相应的分配器ByteBufAllocator,类似工厂模式.我们先学习UnpooledHeapByteBuf与其对应的分配器UnpooledByteBufAllocator 如何 ...
- Django项目：CRM(客户关系管理系统)--69--59PerfectCRM实现king_admin行内编辑
#base_admin.py # ————————24PerfectCRM实现King_admin自定义操作数据———————— from django.shortcuts import render ...
- scp免密码拉去方法
# scp命令免密码vi /etc/hosts.allow新增行sshd:61.174.9.92:allow 拷贝/root/.ssh/id_rsa.pub到备份机,重命名为/root/.ssh/au ...
- PAT甲级——A1064 Complete Binary Search Tree
A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...
- PAT甲级——A1025 PAT Ranking
Programming Ability Test (PAT) is organized by the College of Computer Science and Technology of Zhe ...
- WhaleCTF之web密码泄露
WhaleCTF之密码泄露 前往题目 没有思路,习惯看一下源码,拉到最后,发现有惊喜 直接把index.php 换成password.txt,访问 这是要让我密码爆破吗?直接把密码保存成passwor ...