前几天改几个页面样式,大部分都改完了,就剩上传文件控件没有美化,就想放过去算了,就这样吧,后来还是觉得实在看不下去,还是动了点小脑筋把它改造完了,开心开心
...
现记录一下改造过程:
最先就是就这个控件写样式,几次三番都失败了。哼,那就不要怪我了,只能来个狠的,一不做二不休,直接把这个不听话的家伙给隐藏了,原位置给放了一个按钮,再在按钮后面放了一个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,我就要让你干活,还不让你露脸。