有时候文件上传input框样式不符合页面样式要求，需要修改为自定义的按钮或图片样式
ie7下的文件上传按钮
chrome的兼容性最好，很容易处理，直接css设置隐藏
style="display: none"，然后通过另一个按钮去触发$("#inputfileID").click();都可以上传成功。但是在低版本的IE会存在SCRIPTS:拒绝访问的安全限制问题，限制我们必须通过点击file的浏览按钮去上传文件，否则不能上传
网上找的图，win10上选择ie7模式去测试只是没反应，没有报错，可能需要win7
通用解决办法：通过修改CSS样式，设置file框透明不显示但覆盖在自定义按钮的上层，点击时实际点击file按钮
实现样式主要需要做到：
1.透明度的设置opacity: 0;
filter: alpha(opacity=0);
-moz-opacity:0;
opacity: 0;
2.z-index的设置，大的值位于上层，把自定义按钮的值设置为z-index: -1;
3.position定位的方式，有不同的实现方式，这里考虑把inputfile和自定义按钮放到一个div容器里边，然后inputfile使用绝对定位position: absolute;当然也有其他的方式
position
4.代码实例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>文件上传测试</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<style>
body{
width: 80%;
margin: 0 auto;
}
/* 需要设置inputFile透明且位于button正上方*/
#content{
width: 400px;
height: 100px;
overflow: hidden;
position: relative;
background-color: azure;
}
#file1{
/* 设置了相同的高度和宽度，保证重叠时全覆盖*/
width: 200px;
height: 50px;
/* 设置了绝对定位，相对于static定位以外的第一个父元素#content进行定位，实现覆盖 */
float: left;
position: absolute;
left: 0;
top: 0;
/* 设置透明度 */
filter: alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
/* 设置z-index置于最上层 */
z-index: 999;
cursor: pointer;
}
#btn1{
width: 200px;
height: 50px;
float: left;
z-index: -1;
}
</style>
<body>
<form action="/upload" enctype="multipart/form-data" method="post">
<div id="content">
<input id="btn1" type="button" class="btn btn-primary" value="选择文件"/>
<input id="file1" type="file" name="uploadFiles"/>
</div>
<div style="height: 50px;"></div>
<input class="btn btn-default" type="submit" value="提交">
</form>
</body>
</html>
5.实现效果
左区域有缺陷
可以发现左边这块区域点击一次后会有光标，需要双击才能打开，而点击浏览按钮只需要点击一次，问题是如果只想要右边这个浏览按钮又很难处理，只能把按钮宽度缩到65px那样，感觉效果不好。
然后之前在网上看到有使用label标签的处理方式
label
使用label标签可以直接通过点击label调用表单控件，跟之前做法完全类似，这次需要确保点击的是label标签。将inputfile透明度设置为opacity: 0且不做定位覆盖，发现inputfile框还会存在光标聚焦问题。
label方式需要失焦
可以发现不需要做之前的重叠覆盖，直接设置透明也可以实现调用，光标聚焦问题可以直接设置自动失焦
<input id="file1" type="file" name="uploadFiles" onfocus="blur()"/>
补充：最好还是像之前一样做重叠覆盖的操作，不过这次是把inputfile框放到label下方隐藏z-index倒过来就可以了，防止双击inputfile区域也可以打开上传框的问题。
