HTML upload file control compatible with IE browser style

Recently in the company to do projects need to use the HTML upload file control, but found that the native upload file control <input type= "file"/> in IE, Chrome browser display effect is very different, in order to unify the style, I refer to many methods on the Internet, Here is my own code implementation (in fact, the original input file with a shell, and then add some style, so that it does not look like the original so ugly)

HTML section

<div class= "Upload-box" ><div class= "input" ><input type= "file" id= "input" size= "" "/> <!-- Native File--></div><div class= "upload" ><div class= "Upload-choose" > select File </div><div class = "Upload-info" ></div></div></div>

CSS Section

1 . Upload-box{2 position:relative;3}4 5 . Input{6 Height:30px;7 position:Absolute;8 Top:0px;9  Left:0px;Ten} One  A input[type= "file"]{ - Border:1px solid Red; - width:480px; the Opacity:0; -} -  - input[type= "Submit"]{ + width:100px; - Height:30px; + background:#ddd; A Border:None; at} -  - . Upload-choose{ - width:80px; - Height:30px; - background:#eee; in float: Left; - text-align:Center; to Line-height:30px; + font-family:"Microsoft Yahei"; - font-size:14px; the Font-weight:Bold; *} $ Panax Notoginseng . Upload-info{ - width:400px; the Border:1px solid #eee; + Height:28px; A Line-height:28px; the float: Left; + Padding-left:5px; - Overflow:Hidden; $}

JS section

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

This can basically achieve the same effect as the native upload control

HTML upload file control compatible with IE browser style