最近在公司做项目时需要用到html的上传文件控件，但发现原生的上传文件控件<input type="file" />在IE、Chrome浏览器的显示效果相差很大，为了统一样式，我参考了网上的许多方法，下面给出我自己的代码实现（实际上就是在原生的input file上面加个外壳，再添加一些样式，让它看上去不像原生的这么丑）
html部分
<div class="upload-box"><div class="input"><input type="file" id="input" size="45"/> <!--原生的file--></div><div class="upload"><div class="upload-choose">选择文件</div><div class="upload-info"></div></div></div>
css部分
1 .upload-box { 2 ????position: relative; 3 } 4 ?5 .input { 6 ?????height: 30px; 7 ?????position: absolute; 8 ?????top: 0px; 9 ?????left: 0px;10 }11 12 input[type="file"] {13 ?????border: 1px solid red;14 ?????width: 480px;15 ?????opacity: 0;16 }17 18 input[type="submit"] {19 ?????width: 100px;20 ?????height: 30px;21 ?????background: #ddd;22 ?????border: none;23 }24 25 .upload-choose {26 ?????width: 80px;27 ?????height: 30px;28 ?????background: #eee;29 ?????float: left;30 ?????text-align: center;31 ?????line-height: 30px;32 ?????font-family: "Microsoft YaHei";33 ?????font-size: 14px;34 ?????font-weight: bold;35 }36 37 .upload-info {38 ?????width: 400px;39 ?????border: 1px solid #eee;40 ?????height: 28px;41 ?????line-height: 28px;42 ?????float: left;43 ?????padding-left: 5px;44 ?????overflow: hidden;45 }js部分
1 $(function(){2 ????$("#input").change(function(){3 ????var filename_split = $(this).val().split("\\");4 ????var filename = filename_split[filename_split.length - 1];5 ????$(".upload-info").text(filename);6 ????}); 7 });这样基本上可以实现和原生上传控件相同的效果
兼容IE浏览器样式的html上传文件控件
原文地址：http://www.cnblogs.com/NickyLi/p/7488673.html