html修改上传文件名,input(file)样式修改及上传文件名显示

实现思路:javascript

a标签包裹input元素

设置a标签为上传按钮的样式,相对定位

设置input为透明,绝对定位,覆盖到a上面

效果:看到的按钮是a的样式,点击时实际是点击input元素。样式和功能都具有html

html代码:java

选择文件  

CSS代码:web

.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);

}

效果:浏览器

543e87ae79d5055ab4a8a06470c4b647.png

此时上传文件的文件名不显示,须要用js处理:ide

$(".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

}

})

效果:this

284763fc19b6c1c0a9407a5e026b0330.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值