Let a tag upload a file

Recently the project needs to write a function, and the structure I use here is

<div class= "Select_file" >

<a href= "javascript:void (0);" > select File </a>

<input type= "File" unselectable= "on" value= "Select File"/>

</div>

CSS is the input label transparent setting 0, so that when you click on a can also trigger to input[type=file] to achieve the effect of the click Upload file.

. select_file{width:168px;height:43px;display:block;border-radius:25px;margin-left:60px;border:1px Solid #999999 ; overflow:hidden;position:relative;}

. Select_file a{width:100%;height:43px;display:block;text-align:center;line-height:43px;}

. Select_file Input{opacity:0;filter:alpha (opacity=0);p osition:absolute;margin-top: -43px;width:100%;height:43px; z-index:100;cursor:pointer;font-size:100px\9;/* compatible IE input file Double-click the problem */}

PS: unselectable= "on" input file This tag in IE will have annoying flashing cursor, with this property can eliminate this cursor ~

font-size:100px\9; under IE this button is on the right, and Chrome is on the left, with this CSS by changing the size of the built-in font, the box will be large, so that the smart button to become larger, so that the normal upload files, and solve the IE You need to double-click to upload a file problem ~

There is another such solution on the Internet using JS

$ (' a '). On (' click ', Function (e) {    e.preventdefault ();    $ (this). Closest (' input[type=file] '). Trigger (' click ');})

However this is more troublesome, the actual in use, has not succeeded ... Deprecated.

?

Let a tag upload a file