IE需要多次点击提交

Question

我有一个带有文件控件的表单和一个单独的按钮,可以在该文件字段上触发click事件.问题是,如果单击该按钮,则页面底部的提交按钮需要在IE中单击两次.我该如何预防呢？

在它最简单的形式,这里是代码:

HTML:

<form action="#">
  <input type="file" id="myFile" />
  <button id="myButton">** My Choose **</button>
  <input type="submit" value="Submit" />
</form>

JavaScript的:

$(function() {
    $('#myButton').click(function(e) {
        e.preventDefault();
        $('#myFile').click();
    });
});

JSFiddle的一个更深入的示例:http: //jsfiddle.net/XPqQB/6/

在IE中,点击"我的选择"按钮将需要两次点击"提交"才能实际发布.(通常"myFile"将被隐藏,但出于演示目的,我将其保持可见.)

测试步骤:

• 情况1:
  1. 刷新页面.
  2. 点击"提交".确认提交(通过开发工具).
• 案例2:
  1. 刷新页面.
  2. 单击文件输入旁边的"浏览...",选择文件.
  3. 点击"提交".确认提交(通过开发工具). (有时即使这需要两次点击!)
• 案例3:
  1. 刷新页面.
  2. 单击"我的选择",选择文件.
  3. 点击"提交".没有动作.

您还可以看到,在情况2和3中,有时也不会触发.click()或.submit()事件.

另一个有趣的方面是当页面上有多个文件输入时.如果有三个,并且您执行了上述三次,则必须单击总共四次提交按钮才能提交页面.

Answer 1

解决方案是使用指向文件输入的标签，您可以将任何样式应用于标签，它将起作用

<label for="myFile">** My Label **</label><br/>
<input type="file" id="myFile" name="myFile" />

据我了解这是由 IE9 安全限制引起的