input(file)样式修改及上传文件名显示
Posted 王永峰的博客
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input(file)样式修改及上传文件名显示相关的知识,希望对你有一定的参考价值。
实现思路:
- a标签包裹input元素
- 设置a标签为上传按钮的样式,相对定位
- 设置input为透明,绝对定位,覆盖到a上面
效果:看到的按钮是a的样式,点击时实际是点击input元素。样式和功能都具备
html代码:
<a href="javascript:;" class="file gradient">选择文件
<input type="file" >
</a>
CSS代码:
.file { position: relative; display: inline-block; background: #ccc; border: 1px solid #333; padding: 4px 20px; overflow: hidden; text-decoration: none; text-indent: 0; line-height: 20px; border-radius: 20px; color: #333; font-size: 13px; } .file input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; }
.gradient{ filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fff,endcolorstr=#ccc,gradientType=0); -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fff,endcolorstr=#ccc,gradientType=0);/*IE8*/ background:#ccc; /* 一些不支持背景渐变的浏览器 */ background:-moz-linear-gradient(top, #fff, #ccc); background:-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ccc)); background:-o-linear-gradient(top, #fff, #ccc); }
效果:
此时上传文件的文件名不显示,需要用js处理:
$(".file").on("change","input[type=\'file\']",function(){ var filePath=$(this).val(); if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){ $(".fileerrorTip1").html("").hide(); var arr=filePath.split(\'\\\\\'); var fileName=arr[arr.length-1]; $(".showFileName1").html(fileName); }else{ $(".showFileName1").html(""); $(".fileerrorTip1").html("您未上传文件,或者您上传文件类型有误!").show(); return false } })
效果:
以上是关于input(file)样式修改及上传文件名显示的主要内容,如果未能解决你的问题,请参考以下文章
使用jquery.form.js实现文件上传及进度条前端代码