上傳控件是
<input type="file"/>
而實際開發過程中,都會自定義一個控件,因為這個控件本身難看,而且不同瀏覽器效果不一樣。
如IE8顯示如下:
谷歌瀏覽器顯示是這樣子的:
所以通常需要自定義。
1、通常的做法就是把上傳控件隱藏,即style="display:none;",再添加一個按鈕,設置所需樣式,然后通過js觸發上傳控件的事件。
這樣子在谷歌、火狐等瀏覽器是可以的,但是在IE8中就不兼容了,好多事件都觸發不到,比如我需要用到上傳控件的onchange事件,IE8就觸發不到。
2、頁面上直接放兩個控件,一個上傳控件,一個自定義樣式的按鈕,使這兩個控件重疊,然后設置上傳控件的透明度為0、z-index為1000,這樣子用戶看到的是自定義的按鈕,實際上點擊的就是上傳控件,就兼容IE8了。代碼如下:
<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="請選擇..."/>
效果如下,不管是谷歌還是IE8,顯示全是一樣的: