應用某些CSS樣式后，fileupload click事件無法正確觸發（在IE 8上）

Question

我有以下

Asp.net標記

 <div class="formSample">
        <div class="uploadTest">
            Choose File 
        <asp:FileUpload ID="uploadControl" runat="server" />
        </div>          
 </div>

CLass類

.formSample

{
   display: inline-block;
   float: right;
   width: 22em;
   margin-top: 0.3em;
}

.uploadTest

 {
   font-family: 'open_sansregular', Arial, Helvetica, sans-serif;
   float: right;
   overflow: hidden;
   width: 9em;
   text-align: center;
   color: white;
    font-size: 1em;
   background: #22a0db;
   cursor: pointer;
    padding: 0.4em 0.2em 0.1em 0.3em;
     margin: 0em 0em;
    border-radius: 1em;
   -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    -ms-border-radius: 1em;
    -o-border-radius: 1em;
}

使用Javascript

    function upLoadOnClick() {
        document.getElementById('ctl00_ContentPlaceHolder1_uploadControl').parentNode.click();
    }

      document.getElementById('ctl00_ContentPlaceHolder1_uploadControl').onClick = upLoadOnClick;

這里的問題是，當我按下右側的控件時，僅彈出窗口出現，但是當我按下中部或左側的控件時，瀏覽窗口不會啟動。 僅在IE8中會出現此問題。 有什么建議么？

提前致謝

Answer 1

首先，出於安全原因，大多數（可能是所有現代）瀏覽器均不允許以編程方式點擊file輸入，因此您的JavaScript將無法正常運行。 要使選擇文件彈出窗口出現，用戶必須自己單擊控件。 您的沒有JavaScript的代碼似乎可以在Chrome和Firefox中正常運行。 這是一個小提琴 。

眾所周知，跨瀏覽器很難設置file輸入的樣式。 我認為，最常見的方法是使文件輸入不可見，並將其覆蓋在按您希望其外觀樣式設置的其他元素之上。 再舉一例小提琴 。