1. 程式人生 > >解決美化後的檔案上傳控制元件(type=file),IE和firefox不相容的問題

解決美化後的檔案上傳控制元件(type=file),IE和firefox不相容的問題

        普通的file控制元件,在IE和firefox的表現會有所不同,為了美化上傳控制元件,通常會做一個text+button來替代file控制元件。 設定file控制元件完全透明,這樣在點選button的時候,其實就是點選隱藏的file控制元件的瀏覽,本來應該完全可以做到了,但是因為我的專案中這個控制元件是在一個彈出(iframe)頁面中,不知道是樣式衝突還是其他的什麼原因,在IE下,隱藏的file控制元件並沒用變成透明的,而是有一塊白色的背景,還覆蓋了text+btton,這樣就達不到我們要的那個效果了。在這種情況下只有FF瀏覽器支援了。
      於是乎,在該控制元件下新增一個隱藏的Iframe,裡面放一個只有file控制元件的頁面,當點選button按鈕時,就觸發子頁面中的file控制元件的點選事件,開啟瀏覽檔案視窗,選擇你要上傳的檔案,然後上傳到伺服器,但是在頁面上點選button觸發子頁面的file控制元件的click事件,只有IE支援

,FF不支援。具體原因好像是說FF處於安全的考慮,禁止用其他的函式來觸發file控制元件的點選事件。
     綜上,為了實現,只能兩種方式並存了,在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);
}