css input[type=file] 样式美化,input上传按钮美化
2016-04-15 10:02
776 查看
<a href="javascript:;" class="a-upload"> <input type="file" name="" id="">点击这里上传文件 </a> <a href="javascript:;" class="file">选择文件 <input type="file" name="" id=""> </a>
/*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 }
$(".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 } })
相关文章推荐
- CSS实现垂直居中的常用方法
- CSS3盒模型-box-shadow详细解析
- win7中VS2010中安装CSS3.0问题解决方法
- CSS弹性盒子Flexbox布局详解
- 34_水平ProgressBar样式
- 勤能补挫-简单But易错的JS&CSS问题总结
- Css样式技巧:常用的选择器和通用选择器
- 弹出框css技巧
- css 伪元素的初次使用
- 对css3属性 z-index的理解
- CSS中margin和padding的区别
- CSS学习笔记总结和技巧
- Gulp学习指南之CSS合并、压缩与MD5命名及路径替换(转载)
- 纯CSS实现帅气的SVG路径描边动画效果(转载)
- CSS定位属性postiion详解
- css3 变换 transform(2D)
- css sprite 图片整合处理技术(精灵技术)
- CSS行高——line-height
- HTML&CSS——选择器中间加空格和逗号的区别?
- CSS3.0使用@font-face自定义字体