标签：上传 highlight one soft 显示 width pos 参考 round
最近在公司做项目时需要用到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 });
这样基本上可以实现和原生上传控件相同的效果
标签：上传 highlight one soft 显示 width pos 参考 round
原文地址：http://www.cnblogs.com/NickyLi/p/7488673.html
