2023年12月13日发(作者：)
input（file）样式修改及上传文件名显示
实现思路：
1. a标签包裹input元素
2. 设置a标签为上传按钮的样式，相对定位
3. 设置input为透明，绝对定位，覆盖到a上面
效果：看到的按钮是a的样式，点击时实际是点击input元素。样式和功能都具备
html代码：
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:nt(startcolorstr=#fff,endcolorstr=#ccc,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:nt(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(f("jpg")!=-1 || f("png")!=-1){
$(".fileerrorTip1").html("").hide();
var arr=('');
var fileName=arr[-1];
$(".showFileName1").html(fileName);
}else{
$(".showFileName1").html("");
$(".fileerrorTip1").html("您未上传文件，或者您上传文件类型有误！").show();
return false
}
})
效果:
发布评论