修改input选择文件样式并实现用户头像更换

input标签的type属性为file时，有个默认样式，如图

想改成如下样式又不影响其功能时，可以采用的方法如下：使用定位将input与按钮重合，将input标签透明度设为0，z-index设为最高让其处在最上层。

.userImg{
width: 70px;
height: 70px;
position: absolute;
top: -40px;
left: 150px;
border-radius: 50%;
}
.upfile{
position: absolute;
top: 35px;
font-size: 14px;
font-family: sans-serif;
left: 150px;
z-index: 1;
background-color: #31708f;
color: #fff;
}
#upfile{
position: absolute;
top: 35px;
font-size: 12px;
font-family: sans-serif;
left: 150px;
opacity: 0;
z-index: 100;
}
实现效果如下

当然这样写有一个弊端就是当你选择了文件之后你不知道你是否已经选择成功，我的解决办法是给input监听change事件，当input内容改变时触发该事件然后向后台提交ajax请求