Javascript IE需要双击自定义按钮

我有一个脚本分为：

HTML:

<div id="wrapper">
     <div id="container">
        <div id="button">Click me!</div>
        <form>
            <input type="file" />
        </form>
      </div>
     <div id="notice">File is uploaded!</div>
</div>

$(document).ready(function () {
    $("input").on("change", function () {
       $("div#notice").fadeIn();
        //$("form").submit(); //If you want it to submit on your site uncomment this
    });
 });

div#wrapper {
    background-color: #ccc;
    position: absolute;
    width: 300px;
    height: 200px;
}
div#wrapper > form > input {
    color: rgba(0, 0, 0, 0);
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
    color: rgba(0, 0, 0, 0);
 }
div#container {
    width: 200px;
    height: 20px;
    overflow: hidden;
}
div#button, input {
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
 }
div#button {
    z-index: 1;
    background-color: #AAA;
 }
input {
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    alpha: filter(opacity=0);
    font-size: 25px;
    color: rgba(0,0,0,0);
    filter: alpha(opacity=0);
    zoom: 1;
 }
div#notice
{
    background-color: green;
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
 }

CSS:

<div id="wrapper">
     <div id="container">
        <div id="button">Click me!</div>
        <form>
            <input type="file" />
        </form>
      </div>
     <div id="notice">File is uploaded!</div>
</div>

$(document).ready(function () {
    $("input").on("change", function () {
       $("div#notice").fadeIn();
        //$("form").submit(); //If you want it to submit on your site uncomment this
    });
 });

div#wrapper {
    background-color: #ccc;
    position: absolute;
    width: 300px;
    height: 200px;
}
div#wrapper > form > input {
    color: rgba(0, 0, 0, 0);
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
    color: rgba(0, 0, 0, 0);
 }
div#container {
    width: 200px;
    height: 20px;
    overflow: hidden;
}
div#button, input {
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
 }
div#button {
    z-index: 1;
    background-color: #AAA;
 }
input {
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    alpha: filter(opacity=0);
    font-size: 25px;
    color: rgba(0,0,0,0);
    filter: alpha(opacity=0);
    zoom: 1;
 }
div#notice
{
    background-color: green;
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
 }

注意：在模糊被用来隐藏IE中闪烁的图标之前，这个问题就已经存在了

在Chrome和Firefox中，该按钮只需单击一次。在IE10中，它需要双击，这是我不想要的。我在想一个办法，让它一键点击

到目前为止，我唯一尝试过的就是对输入进行

.render（“click”）

，但没有成功

---

jsIDLE:

双击文件上传的文本部分，如@TravisPessetto所述

由于无法在文件输入控件中隐藏/删除文本部分，我建议您在文件输入控件上放置一个常规按钮

---

有关更多详细信息。

虽然@bastos.sergio在文本部分中的说法是正确的，但如果您对使用JavaScript感到满意，则有一种解决方法

您需要：

<div id="wrapper">
     <div id="container">
        <div id="button">Click me!</div>
        <form>
            <input type="file" />
        </form>
      </div>
     <div id="notice">File is uploaded!</div>
</div>

$(document).ready(function () {
    $("input").on("change", function () {
       $("div#notice").fadeIn();
        //$("form").submit(); //If you want it to submit on your site uncomment this
    });
 });

div#wrapper {
    background-color: #ccc;
    position: absolute;
    width: 300px;
    height: 200px;
}
div#wrapper > form > input {
    color: rgba(0, 0, 0, 0);
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
    color: rgba(0, 0, 0, 0);
 }
div#container {
    width: 200px;
    height: 20px;
    overflow: hidden;
}
div#button, input {
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
 }
div#button {
    z-index: 1;
    background-color: #AAA;
 }
input {
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    alpha: filter(opacity=0);
    font-size: 25px;
    color: rgba(0,0,0,0);
    filter: alpha(opacity=0);
    zoom: 1;
 }
div#notice
{
    background-color: green;
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
 }

• 包装器div标签
• 内部dev标记
• 某种形式的表单输入
• JQuery（在2.1上测试）

步骤：

<div id="wrapper">
     <div id="container">
        <div id="button">Click me!</div>
        <form>
            <input type="file" />
        </form>
      </div>
     <div id="notice">File is uploaded!</div>
</div>

$(document).ready(function () {
    $("input").on("change", function () {
       $("div#notice").fadeIn();
        //$("form").submit(); //If you want it to submit on your site uncomment this
    });
 });

div#wrapper {
    background-color: #ccc;
    position: absolute;
    width: 300px;
    height: 200px;
}
div#wrapper > form > input {
    color: rgba(0, 0, 0, 0);
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
    color: rgba(0, 0, 0, 0);
 }
div#container {
    width: 200px;
    height: 20px;
    overflow: hidden;
}
div#button, input {
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
 }
div#button {
    z-index: 1;
    background-color: #AAA;
 }
input {
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    alpha: filter(opacity=0);
    font-size: 25px;
    color: rgba(0,0,0,0);
    filter: alpha(opacity=0);
    zoom: 1;
 }
div#notice
{
    background-color: green;
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
 }

创建“包装器”div

创建一个内部“按钮”div

将表单元素放在内部“button”div下面

将“包装器”和“内部”div设置为相同的大小

在包装器上设置溢出：隐藏

为单击函数的“内部”div设置创建JQuery脚本

在“内部”函数中，单击函数调用

。在输入上单击（）

在IE 10中似乎对我有用

$（文档）。准备好了吗(
函数（）
{
$（“#打开#对话框”）。在（“单击”，函数（）上
{
$（“输入”）。单击（）；
});
$（“输入”）。关于（“更改”，函数（）
{
警报（$（“输入”）；
$（“#通知”）.html（“上传”）；
});
});
#打开#对话框
{
位置：相对位置；
宽度：200px；
高度：50px；
颜色：白色；
字体系列：“Arial”；
字号：14pt；
文本对齐：居中；
顶部：25px；
边缘顶部：-.5em；
z指数：1；
}
#包装纸
{
宽度：200px；
高度：50px；
溢出：隐藏；
光标：指针；
边界半径：10px；
背景：绿色；
z指数：0；
}
输入
{
边缘顶部：100px；
}

点击我
无需上传
我遇到了同样的问题，发现了不同的方法。我刚把那个按钮做成我需要的大小，上面有字体大小。那个么这个人就不能点击文本部分了

<div class="divFileUpload">
    <input class="fileUpload" type="file" />
</div>

我找到了另一个更简单的解决方案，只需在mousedown上为该元素触发事件“click”：

$("input").mousedown(function() {
    $(this).trigger('click');
})

为了避免在其他浏览器上出现问题，请仅将此解决方案应用于IE：

if ($.browser.msie && parseInt($.browser.version, 10) > 8) {
    $("#your_file_input").mousedown(function(event) {
        if (event.which == 1) {
            $(this).trigger('click');
        }
    })
}

这是您的JFIDLE修改版，请在IE 9-10上查看：

编辑：修改示例，以限制仅左键单击的事件处理
（有关详细信息，请参阅）
要跟进什么

这可能就是您看到的


但除此之外，还有一个透明的文件上载控件。

单击“浏览”按钮，一次单击即可打开“文件上载”对话框。
在IE中，如果你想看到文件上传对话框，你必须双击它左边的文本框

增加文件输入的字体大小以填充按钮图像

我混合了各种解决方案，以获得适合我的解决方案（在每个浏览器上）。它使用较少的嵌套编写

HTML

<!--/* Upload input */-->
<div class="input-file">
  Select image
  <input type="file" />
</div>

这可能与以下事实有关：当您单击它时，它会将您放入文件输入的文本部分，因此您单击的是文件输入的文本侧，而不是浏览按钮。只是好奇，这是否适用于IE8？我不再从事我正在从事的项目，但如果我没记错的话，它必须得到IE8的支持（政府）。但可能是IE9。