实现思路：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);
}
效果：浏览器
此时上传文件的文件名不显示，须要用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
