应用某些CSS样式后，fileupload click事件无法正确触发（在IE 8上）

Question

I have the following

Asp.net Markup

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

Class 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;

The issue here is when i press the control on the right hand side then only the pop up appears but when i press the control on middle or left the browse window doesnt fire up. This problem only occurs in IE8. Any suggestions?

Thanks in advance

Answer 1

First of all, most (and probably all modern) browsers do not allow programmatic clicks of file inputs for security reasons, so your javascript will not work the way you want it to. To get the select file popup to appear the user must click the control themselves. Your code as-is without the javascript seems to work as expected for me in both Chrome and Firefox. Here is a fiddle .

The file input is notoriously difficult to style across browsers. The most common approach I believe is to make the file input invisible and overlay it on top of other elements that are styled the way you want them to look. Here's another example fiddle .