javascript - IE 需要多次点击提交

Question

我有一个带有文件控件和一个单独按钮的表单，该按钮会导致在该文件字段上触发单击事件。问题是如果点击按钮，那么页面底部的提交按钮需要在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. 点击“提交”。 没有 Action 。

您还可以看到，在情况 2 和 3 中，有时 .click() 或 .submit() 事件也未被触发。

另一个有趣的方面是当页面上有多个文件输入时。如果是三个，你做了3次上面的操作，你总共要点击4次提交按钮才能提交页面。

Answer 1

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

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

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