input 文件上传按钮美化

最初解决这个问题的时候，用了浮动，透明... 总之一堆 css 看着头疼。其实最根本的原因是 input 按钮点击事件的触发，罗列下面两种方式。

• 绝对定位一堆css

 <span id="personUploadBtn" style="height:36px;position:relative;width:80px;overflow:hidden;display:inline-block;float:none" class="btn btn-success">
       <a href="javascript:;" class="lookFile" style="line-height:22px;text-decoration:none;color:#FFF;"   >文件上传</a>
       <input style="width:100%;height:100%;cursor:pointer;opacity:0;position:absolute;top:0px;left:0;font-size:0;" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" onclick="alert(“定义方法”)"  type="file" class="updateFile" value="上传文件">
</span>

• 通过 jQuery 实现模拟点击， bootstrap 设置按钮样式

// js 部分
 $("#clp").bind("click",function(){
       return $("#file").click();
 });
// html  部分

<button id="clp" class="clp btn btn-success">文件上传</button>
<input style="display: none;" id="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" onclick="javascript:void(alert('写你上传的方法。'));" type="file" class="updateFile" value="上传文件" />

这种方式，设置简单，也更加灵活。把 input 隐藏起来就可以了，当前例子是上传 Excel 文件

• 通过原生 js 实现

其实只需要将上面例子 js 部分代码修改下就行了
 $("#clp").bind("click",function(){
       $("#file")[0].click();
 });

说明：这种方式对 a 标签的模拟点击也是可以的。