The upload control is
<input type="file"/>
In the actual development process, a control will be customized, because the control itself is ugly, and the effect of different browsers is different.
For example, IE8 displays the following:
Google Chrome shows this:
So usually customization is required.
1. The usual practice is to hide the upload control, that is, style="display:none;", add a button, set the required style, and then trigger the event of the upload control through js.
This is possible in Google, Firefox and other browsers, but it is not compatible in IE8, and many events cannot be triggered. For example, I need to use the onchange event of the upload control, but IE8 cannot trigger it.
2. Put two controls directly on the page, an upload control and a button with a custom style, so that the two controls overlap, and then set the transparency of the upload control to 0 and the z-index to 1000, so that what the user sees is The custom button, in fact, clicks the upload control, which is compatible with IE8. code show as below:
<input type="file" name="11" 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="请选择..."/>
The effect is as follows, whether it is Google or IE8, the display is all the same:
