input美化上传按钮美化
今天工作需求碰到 样式改变上传按钮
效果:
<a href="javascript:;" class="a-upload"><input type="file" name="" id="">点击这里上传文件 </a>
1 <style type="text/css"> 2 .a-upload { 3 padding: 4px 10px; 4 height: 20px; 5 line-height: 20px; 6 position: relative; 7 /*相对定位*/ 8 cursor: pointer; 9 color: #888; 10 background: #fafafa; 11 border: 1px solid #ddd; 12 border-radius: 4px; 13 overflow: hidden; 14 display: inline-block; 15 /*显示一排*/ 16 *display: inline; 17 *zoom: 1 18 } 19 20 .a-upload input { 21 position: absolute; 22 font-size: 100px; 23 right: 0; 24 top: 0; 25 opacity: 0; 26 filter: alpha(opacity=0); 27 cursor: pointer 28 } 29 30 .a-upload:hover { 31 color: #444; 32 background: #eee; 33 border-color: #ccc; 34 text-decoration: none 35 } 36 </style>
附带小功能:截取上传文件名:
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 var src =""; 4 $(".a-upload").on("change","input[type='file']",function(){ 5 src = $(this).val(); 6 console.log(src); 7 if (src.indexOf("jpg") != -1 || src.indexOf("png") != -1 ) { 8 $(".filetext").html("").hide(); 9 var arr = src.split("\\"); 10 var filename = arr[arr.length-1]; 11 var name = filename.split("."); 12 var lastname = name[0]; 13 $(".showfileName").html(lastname); 14 }else{ 15 $(".showfileName").html(""); 16 $(".filetext").html("宁未上传文件,或者宁上传的文件类型有误") 17 } 18 }) 19 20 }) 21 </script>
转载于:https://www.cnblogs.com/h5monkey/p/5919714.html
input美化上传按钮美化相关推荐
- css input[type=file] 样式美化,input上传按钮美化
思路: 原文出处:http://www.haorooms.com/post/css_input_uploadmh input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0, ...
- html选择文件按钮美化,css input[type=file] 样式美化,input上传按钮美化
我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 1. 思路 inp ...
- CSS美化上传按钮、checkbox和radio样式
思路: 美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. input[type=file]上传按钮美化 代码如下: 样式一: /*a upload * ...
- input file上传按钮反应慢的解决方法
点击上传按钮后,选择文件弹窗要好几秒才能出现 原因一:文件后缀验证 解决方法:将可接受的值填写完整,这样就减少了使用通配符时的查找事件 原因二:在chrome浏览器下反应慢的原因是因为chrome浏览 ...
- 利用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 file 上传隐藏美化
最近有一天,因为头像上传的 file 隐藏问题,加了个班,今天刚好有时间,赶紧记录一下. 先上代码,就是一个 css 样式优化. /*选择文件上传input css*/ .am-form-file { ...
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- 美化上传文件框(上传图片框)
传统的表单控件十分简陋,可以说是很难看,那怎么办? 方法:我们自己做一个好看的样式出来,用各种标签啊,css啊,是可以做到的.如图: 做出这样一个样子应该是很简单的,但是怎么让他具有上传的功能的呢? ...
最新文章
- RDKit2018.03.3+Win10(64位):ImportError: DLL load failed: 找不到指定的模块。
- python mainloop函数_python中的mainloop()函数
- VS(Visual Studio)中快速找出含中文的字符串
- 十七、二叉树的建立与基本操作
- OpenKruise v0.7.0发布:增加周期任务分发控制器
- Java 8日期时间API教程:LocalDateTime
- java下拉列表 动态_【示例】教你简单用Java写一个动态更新的下拉列表(无数据库)...
- 数据解析学习笔记(正则解析、bs4解析、xpath解析)
- vim 全局替换_高效操作:vim 快速删除空行和注释
- 电脑c盘满了怎么清理
- python str 换行_一步一步学Python3(小学生也适用) 第八篇: 字符串(str)类型(上)...
- python循环嵌套例题_python练习题:循环打印嵌套列表
- EPS学习笔记3----------常用地物采集方法(房屋,斜坡,台阶)
- 洛伦兹吸引子 matlab,混沌蝴蝶——洛伦兹吸引子
- 关于cdd文件的配置
- (滑稽保命)对于《数据结构》严蔚敏教程的吐槽,附:详细代码
- criteo marketing api 相关
- 基本系统调用性能lmbench测试方法和下载
- C++无论字符串长度为多少sizeof()始终是28字节
- Android: MultiDex原理和优化
热门文章
- 创建两个Thread子类,第一个用run()方法启动,并捕获第二个Thread对象的句柄,然后调用wait()。第二个类的run()方法几秒后为第一个线程调用notifAll(),使第一个线程打印消息
- virtualbox+vagrant快速创建虚拟机
- imgaug: 一个很有用的图像数据增强库
- slf4j mysql_能显示sql语句,没有报错,但是MySQL里没有表?还有,slf4j是必须的吗?...
- gpio stm8 管脚 配置工具_STM8S 外设模块的GPIO引脚应该如何配置
- python resample_Python骚操作:利用Python获取摄像头并实时控制人脸!
- python爬虫JS逆向之人口流动态势大数据
- 一汽奔腾b7o价位_全新奔腾B70正式上市,前脸被吐槽酷似某豪华品牌
- [每日一题] OCP1z0-047 :2013-07-12 多表插入
- php清空单例属性_PHP单例模式--典型的三私一公