创建美化的上传文件按钮
<input type="file">标签自带的上传按钮是无法改变样式，如果不需要显示上传按钮的路径，可以做如下处理：
1、设置input的font-size大小为想要的大小；
2、设置input的透明度为0；
3、为其父元素定义样式；
4、
DEMO：
<!DOCTYPE html>
<html>
<head>
<style>
.fileInputContainer{
height:256px;
background:url(http://images.cnblogs.com/cnblogs_com/dreamback/437546/o_ff6.png);
position:relative;
width: 256px;
}
.fileInput{
height:256px;
overflow: hidden;
font-size: 300px;
position:absolute;
right:0;
top:0;
opacity: 0;
filter:alpha(opacity=0);
cursor:pointer;
}
</style>
</head>
<body>
<div class="fileInputContainer">
<input class="fileInput" type="file" name="" id="" />
</div>
</body>
</html>
另外一种方法是：
1、单独样式和上传文件的input（将input隐藏到页面之外，或者将其opacity设置为0）
2、单独定义一个容器存放上传的文件的路径
DEMO：
<!DOCTYPE html>
<html>
<head>
<style>
.fileInput{width:102px;height:34px; background:url(http://images.cnblogs.com/cnblogs_com/dreamback/upFileBtn.png);overflow:hidden;position:relative;}
.upfile{position:absolute;top:-100px;}
.upFileBtn{width:102px;height:34px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}
</style>
</head>
<body>
<div class="fileInput left">
<input type="file" name="upfile" id="upfile" class="upfile" onchange="document.getElementById('upfileResult').innerHTML=this.value"/>
<input class="upFileBtn" type="button" value="上传图片" onclick="document.getElementById('upfile').click()" />
</div>
<span class="tip left" id="upfileResult">图片大小不超过2M,大小90*90,支持jpg、png、bmp等格式。</span>
</body>
</html>
