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

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

...

现记录一下改造过程：

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

html部分：

<button  type="button" class="d-button"  onclick="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,我就要让你干活，还不让你露脸。