css input[type=file] 样式美化,input上传按钮美化
思路:
原文出处:http://www.haorooms.com/post/css_input_uploadmh
input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。
代码如下:
DOM结构:
<a href="javascript:;" class="a-upload"> <input type="file" name="" id="">点击这里上传文件 </a> <a href="javascript:;" class="file">选择文件 <input type="file" name="" id=""> </a>
CSS样式1:
/*a upload */
.a-upload { padding: 4px 10px; height: 20px; line-height: 20px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: inline-block; *display: inline; *zoom: 1 } .a-upload input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor: pointer } .a-upload:hover { color: #444; background: #eee; border-color: #ccc; text-decoration: none }
样式2:
.file {position: relative; display: inline-block; background: #D0EEFF; border: 1px solid #99D3F5; border-radius: 4px; padding: 4px 12px; overflow: hidden; color: #1E88C7; text-decoration: none; text-indent: 0; line-height: 20px; } .file input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; } .file:hover { background: #AADFFD; border-color: #78C3F3; color: #004974; text-decoration: none; }
修改后如下:
样式二:
备注:对于HTML5之input:file,还可以控制上传的类型的,但是这个是html5的,低版本浏览器不支持,详情请看:HTML5的 input:file上传类型控制 http://www.haorooms.com/post/input_file_leixing
美化后显示文件名
上面美化,把默认显示的文件名也给隐藏掉了,那么如何显示文件名称呢?没关系,我们可以用jquery来获取文件的文件名。
我们可以写个change事件
$(".a-upload").on("change","input[type='file']",function(){ var filePath=$(this).val(); if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){ $(".fileerrorTip").html("").hide(); var arr=filePath.split('\\'); var fileName=arr[arr.length-1]; $(".showFileName").html(fileName); }else{ $(".showFileName").html(""); $(".fileerrorTip").html("您未上传文件,或者您上传文件类型有误!").show(); return false } })
转载于:https://www.cnblogs.com/johnblogs/p/8962028.html
css input[type=file] 样式美化,input上传按钮美化相关推荐
- salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件
在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取.salesforce 零基础学习(二十四)解析csv格式内容中有类似的 ...
- js 获取input type=file 文件,并且上传
html页面: <input type="file" class="inputPic" allowexts="gif,jpeg,jpg,png, ...
- html修改上传文件名,input(file)样式修改及上传文件名显示
实现思路:javascript a标签包裹input元素 设置a标签为上传按钮的样式,相对定位 设置input为透明,绝对定位,覆盖到a上面 效果:看到的按钮是a的样式,点击时实际是点击input元素 ...
- html选择文件按钮美化,css input[type=file] 样式美化,input上传按钮美化
我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 1. 思路 inp ...
- 利用css对input[type=file] 样式进行美化,input上传按钮美化
2019独角兽企业重金招聘Python工程师标准>>> <input type="file" name="fileUpload"/> ...
- input type=file 获取选择文件名称、路径方法及input上传按钮美化
获取文件名 document.getElementById('upload').files[0].name; 获取文件路径 document.getElementById('upload').valu ...
- 自定义input type=file 样式的方法
为什么80%的码农都做不了架构师?>>> 为什么要美化file控件?试想一下,别的孩子都穿戴整齐漂亮,其中两个孩子怎么都不鸟你,太不和谐了. 原始的file控件是这样的: &l ...
- input美化上传按钮美化
今天工作需求碰到 样式改变上传按钮 效果: <a href="javascript:;" class="a-upload"><input ty ...
- input type=file /,美化自定义上传按钮
上传的按钮实在是太丑了,今天看了别人的文章,自己找了找资料,琢磨了一下,结果如下. 图片如下: 代码如下,粘贴即可以用: @{ViewBag.Title = "IndexInput" ...
最新文章
- 4大主流CPU处理器技术架构,不知道就out了!
- 2019 年ML NLP领域十大研究热点
- (二)、MariaDB、Apache软件安装
- 记录android老项目studio升级3.1+后重新配置gradle踩过的坑
- 每日一皮:完美的结对编程!
- Java多线程-生产者与消费者
- 双向链表(带头结点)
- 命名空间“System.Web”中不存在类型或命名空间名称“Optimization”解决方法
- tensorflow入门书籍推荐_架构书籍推荐(入门读)
- 数值分析(10)-数值微分
- Visual Studio 2017 警告C4819解决方案
- css单行文本和多行文本溢出实现省略号显示
- 【Ansible】Ansible 连接主机显示报错的处理方案
- 海康威视Android SDK,并非萤石Android SDK
- 拼接大屏数据展示_八步教会你如何制作数据可视化大屏
- 小米手机开启开发者模式以及INSTALL_FAILED_USER_RESTRICTED报错处理
- 概率论考点之检验统计量(区间估计)
- Keil V5.37.0.0 - 按 F12 无法跳转到定义
- 台式计算机 蓝牙,台式电脑的蓝牙在哪里?台式机怎么打开蓝牙?
- echarts 自定义甘特图
热门文章
- python基础教程攻略-python基础教程(一)
- python工程师薪资坑吗-不在打工就在找坑的路上,3年+程序员都爱跳槽?
- python与excel做数据可视化-python做可视化数据分析,究竟怎么样?
- 在当当买了python怎么下载源代码-Python爬取当当网APP数据
- python3.7安装turtle步骤-Python3 turtle安装和使用教程
- python中的散点图代码-python – 带有图例的matplotlib散点图
- 我在学python-你们以为我在学C++?其实我在学Python!人生苦短!
- python怎么打开shell界面-使用IDLE的Python shell窗口实例详解
- python自学攻略-你是如何自学 Python 的?
- python新手入门-python新手入门方法