解決美化後的檔案上傳控制元件(type=file),IE和firefox不相容的問題
阿新 • • 發佈:2019-01-01
普通的file控制元件,在IE和firefox的表現會有所不同,為了美化上傳控制元件,通常會做一個text+button來替代file控制元件。 設定file控制元件完全透明,這樣在點選button的時候,其實就是點選隱藏的file控制元件的瀏覽,本來應該完全可以做到了,但是因為我的專案中這個控制元件是在一個彈出(iframe)頁面中,不知道是樣式衝突還是其他的什麼原因,在IE下,隱藏的file控制元件並沒用變成透明的,而是有一塊白色的背景,還覆蓋了text+btton,這樣就達不到我們要的那個效果了。在這種情況下只有FF瀏覽器支援了。
於是乎,在該控制元件下新增一個隱藏的Iframe,裡面放一個只有file控制元件的頁面,當點選button按鈕時,就觸發子頁面中的file控制元件的點選事件,開啟瀏覽檔案視窗,選擇你要上傳的檔案,然後上傳到伺服器,但是在頁面上點選button觸發子頁面的file控制元件的click事件,只有IE支援
綜上,為了實現,只能兩種方式並存了,在IE瀏覽器下,操作的是子頁面的file控制元件,在FF瀏覽器下,操作的是當前頁面的file控制元件。
補充:如果在頁面上直接放一個text+button和一個隱藏的file控制元件,當點選button的時候,執行file控制元件的點選事件,並將值賦給text。這種情況下在使用者提交的時候file控制元件框的值會被自動清空,這樣在傳到伺服器上的就是空值,也就是無法上傳。這個好像是IE安全處於安全的考慮,必須使用者直接點選file控制元件的瀏覽框才能上傳。但是如果是觸發IFRAME頁面中的file控制元件,然後通過IFRAME頁面中的file控制元件上傳則是可以的。程式碼如下面所示。(為什麼呢?說時話我也不太清楚,但是就是這樣能實現)
部分程式碼:
當前頁面
<input id="fileName" name="fileName" class="ipt mr5" type="text" readonly />
<a id="loadBtn" class="btn_yl ml5" href="javascript:void(0)" onclick='$("#softupload").contents().find("#flUpLoad").click()'>
<span><span class="fc_42">瀏覽</span></span></a>
<input class="fileItem" id="flUpLoad" name="flUpLoad" type="file" onchange="document.getElementById('fileName').value=this.value;fileUpload();" />
<iframe id="softupload" name="softupload" src="SoftUpload" style="display: none"> </iframe>
子頁面:
<form id="sform" method="post" enctype="multipart/form-data">
<input type="file" name="flUpLoad" id="flUpLoad" onchange="Import()"/>
</form>
樣式:
.fileItem{
position: absolute;
*top:3px;
right:6px;
*right:16px;
_left:310px;
height: 24px;
/**width:50px;*/
display:none \9;
*display:none;
_display:none;
opacity: 0;
filter:alpha(opacity=0);
}