最近在公司做项目时需要用到html的上传文件控件，但发现原生的上传文件控件<input type="file" />在IE、Chrome浏览器的显示效果相差很大，为了统一样式，我参考了网上的许多方法，下面给出我自己的代码实现（实际上就是在原生的input file上面加个外壳，再添加一些样式，让它看上去不像原生的这么丑）

 

html部分

     
	
      
		
        
       	
      
	
      
		
       
        选择文件
       
		
       
	
      
     

 

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 });

 

这样基本上可以实现和原生上传控件相同的效果