Custom upload controls (compatible with IE8)

The Upload control is

<input type= "File"/>

In the actual development process, a control is customized because the control itself is ugly and different from browser effects.

As IE8 shown below:

Google Chrome shows this:

Therefore, customization is usually required.

1, the usual practice is to hide the upload control, that is, style= "display:none;", add a button, set the desired style, and then trigger the upload control via JS event.

such as Google, Firefox and other browsers can be, but in the IE8 is not compatible, a lot of events are not triggered, such as I need to use the upload Control onchange event, IE8 will not trigger.

2, the page directly put two controls, an upload control, a custom style button, so that the two controls overlap, and then set the transparency of the upload control is 0,z-index 1000, this way the user sees a custom button, actually clicked is the upload control, is compatible with IE8. The code is as follows:

<input type= "file" Name= "one" style= "Width:67px;position:absolute;display:inline-block;z-index:1000;filter: Alpha (opacity=0); opacity:0;cursor:pointer;height:23px; "/><input type=" button "value=" Please select ... "/>

The effect is as follows, whether it is Google or IE8, the display is all the same:

Custom upload controls (compatible with IE8)