应用某些css样式后，fileupload-click事件未正确触发(在IE8上）

fileupload click event doesnt get fired properly after applying certain css styles (On IE 8)

本文关键字：IE8 css 样式 事件 fileupload-click 应用      更新时间：2023-09-26

我有以下

Asp.net标记

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

C级通过

.form样品

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

.上传测试

 {
   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中。有什么建议吗？

提前感谢

首先，出于安全原因，大多数（可能是所有现代）浏览器都不允许以编程方式单击file输入，因此您的javascript将无法按您希望的方式工作。要显示选择文件弹出窗口，用户必须自己单击控件。您的代码在没有javascript的情况下，在Chrome和Firefox中似乎都能正常工作。这是一把小提琴。

众所周知，file输入很难跨浏览器进行样式化。我认为最常见的方法是使文件输入不可见，并将其覆盖在其他元素上，这些元素按照您希望的方式进行样式设置。这是另一个小提琴的例子。

相关文章：