5

我有一个带有文件控件和一个单独的按钮的表单，该按钮导致单击事件在该文件字段上触发。问题是如果点击按钮，那么页面底部的提交按钮需要在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. 点击“提交”。确认提交（通过开发工具）。
  • 案例二：
    1. 刷新页面。
    2. 单击文件输入旁边的“浏览...”，选择文件。
    3. 点击“提交”。确认提交（通过开发工具）。 （有时甚至这需要两次点击！）
  • 案例3：
    1. 刷新页面。
    2. 点击“我的选择”，选择文件。
    3. 点击“提交”。没有动作。

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

另一个有趣的方面是页面上有多个文件输入时。如果有 3 个，并且您执行了上述 3 次，则您必须单击提交按钮共 4 次才能提交页面。

4

1 回答 1

1

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

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

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

于 2013-11-07T22:19:28.393 回答