IE input file隱藏不能上傳文件解決方法


當大神們都在探討更深層次的問題時,我還在這里轉載發些膚淺的問題解決方案。罷了,為了和我一樣笨的后來人。

問題:

上傳文件時,用<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(感謝原文作者的分享)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM