Question

我在这里发了一个帖子：

但是，我遇到了一个关于文件上传表单处理的新事件，如果有人遇到这个问题，我很好奇。

我最初的问题是我无法使用onchange事件工作，我想也许这是我的javascript的一个问题，但我发现它与表单被激活的方式有关。

我有一个文件输入

<input type="file" name="abc"/>

现在我做了两件事。

我隐藏了输入并创建了一个按钮（用于更好的样式控制），可以激活输入。

<button id="mybutton">click to upload a pic</button>
<input type="file" name="abc"/>

然后JS用于两者之间的交互：

$("#mybutton").click(function() {
    $("Input[type=file]").click()
};

当然是表单的提交（我在本例中使用了parent，但是在我的实际代码中，我使用了表单id）。

$("input[type=file]").change(function() {
  $(this).parent().submit();
});

当我点击“mybutton”时，预期结果确实发生，我的浏览窗口打开，让我从我的电脑中选择一个文件。此外，当我在IE以外的所有浏览器中更改文件时，会触发onchange事件。现在，如果我取消隐藏表单并手动单击“浏览”按钮并选择一个文件，则会触发onchange事件。所以基本上浏览器会点击实际文件按钮而不是执行$（“input [type = file]”）。click（）

任何人都知道如何解决这个问题？

Answer 1

如前所述，IE在提交包含文件输入的表单时非常严格。必须通过真正的鼠标点击触发文件输入以允许表单提交。另外，IE9和文件输入似乎存在错误。

好消息是有一种方法可以使用标签绕过IE的安全限制：

创建链接到文件输入的常规标签标记。标签将像往常一样触发输入文件。
使用CSS将标签伪装成一个按钮。
必须显示文件输入（对于IE8），但可以使用“visibility：hidden”隐藏。 IE8会接受这个黑客攻击。

Answer 2

如果我没有太多错误，你无法改变这一点，因为这是（原本）旨在保护用户的隐私，无论如何在没有明确的用户许可/行动的情况下上传文件。

Answer 3

确保您的代码位于$("document").ready(function(){... here..});

.live("change", function(){});

似乎是文件输入<+ p>

其他样式的东西是别的东西，但CSS并不是那么复杂 - beautiful file upload

IE9文件输入使用Javascript触发

3 个答案: