上传文件控制input type="file"样式修改记

前几天改几个页面样式,大部分都改完了,就剩上传文件控件没有美化,就想放过去算了,就这样吧,后来还是觉得实在看不下去,还是动了点小脑筋把它改造完了,开心开心

...

现记录一下改造过程:

最先就是就这个控件写样式,几次三番都失败了大哭抓狂发火。哼,那就不要怪我了,只能来个狠的,一不做二不休,直接把这个不听话的家伙给隐藏了,原位置给放了一个按钮,再在按钮后面放了一个span ,用来显视选择的文件,好,拼凑了一个file.那就开始实现功能,不说了,直接上代码

html部分:

<button  type="button" class="d-button"  οnclick="clp();">选择文件</button>
<input type="file"  id="excel" name="excel"/>
<span class="showFileName">未选择任何文件</span>

script部分:

function clp(){
return $("#excel").click(); //重要的在这里,按钮点击进返回的是file点击。
}


$(document).ready(function(){
$("#excel").on("change",function(){
var filePath=$(this).val();
var arr=filePath.split('\\');
var fileName=arr[arr.length-1];
$(".showFileName").html(fileName);  //给span填充上先择的文件名
})});

拼的file随便改样式,原来的input ='file'的家伙给加上display:none。

啦啦啦啦....大功告成啦,你这个不听话的file,我就要让你干活,还不让你露脸得意

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值