相容IE瀏覽器樣式的html上傳檔案控制項

標籤：上傳   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 });

 

這樣基本上可以實現和原生上傳控制項相同的效果

 

相容IE瀏覽器樣式的html上傳檔案控制項