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