html上传文件的按钮优化,美化文件上传按钮自定义input file样式

input file的样式不能直接用css来美化，我们可以曲线救国，把input file的透明度降低为0，相当于把这个控件隐藏了，实际上只是透明度为0，还是存在的，然后把div套上去，让div充当file的按钮。

所以这个办法很简单，但是，把input file的透明度降低，连选择文件后的文件名也被隐藏了，这下可怎么办？那就只能用jquery获取file的文件名了。

文件上传file美化

*{margin:0;padding: 0;}

#btn{

width: 120px;

height: 45px;

background: #39f;

line-height: 45px;

text-align: center;

color: #fff;

}

#btn .file{

opacity: 0;

position: relative;

top: -56px;

width: 100%;

height: 45px;

}

文件上传

function daojishi() {

setInterval("getname()",1000);

}

function getname() {

var filename = $("#btn .file").val();

$("#filename").text(filename);

}

搞定！