當大神們都在探討更深層次的問題時,我還在這里轉載發些膚淺的問題解決方案。罷了,為了和我一樣笨的后來人。
問題:
上傳文件時,用<input type="file" />標簽,但是默認的file標簽很難看,而且每個瀏覽器下都有很大差距。
1.一般解決辦法:
我們基本都把真正的file標簽給隱藏,然后創建一個標簽來替代它,比如我們創建一個a標簽來替代它,隱藏file標簽,單擊a標簽時觸發file標簽click彈出選擇文件窗口,選擇文件之后,觸發file的change事件提交。
存在問題:
由於IE瀏覽器安全限制問題,沒有點擊file的瀏覽按鈕選擇文件都不讓上傳。
2.終極解決辦法:
既然IE非得要親自點擊,我們可以變通一下,讓自定義按鈕存在又能真正點擊到file標簽。
解決方案是讓file標簽蓋在a標簽上,但file是透明的,這樣用戶看到的是a標簽的外觀,實際點擊是file標簽。
代碼如下
<a style="position:relative;" href="javascript:void(0);">
上傳文件 <input style="position:absolute;left:0;top:0;z-index:999;opacity:0;"type="file" name="file" /> </a>
注意:
a.取消a標簽onclick事件,因為實際上已經不需要a標簽的onclick觸發file的click了,而是直接就點擊到file;
b.file標簽不需要再設置display:none隱藏,而是通過opacity:0讓它完全透明,實際它是浮在a標簽之上
c.file標簽設置position:absolute后要給left:0、top:0,否則file標簽不會吻合覆蓋a標簽導致點擊按鈕的時候點不到file標簽
參考原文:http://www.qttc.net/201305334.html(感謝原文作者的分享)