Javascript 如何在非IE浏览器中响应输入类型=文件上的单击事件

下面是一个场景-

与StackOverflow上关于如何调用input[type=file]元素上的click事件的3000个其他问题不同，我只想回答它。我要找的东西是：

<input id="theFile" onclick="var that=this;setTimeout(function(){if(that.value){postTheForm();}}),0);" />

我不是试图调用元素上的click（），我只是想知道什么时候有人选择了一个文件，这样我们就可以提交表单了。在IE中，它按预期工作，因为“文件”对话框将休眠javascript线程，直到用户在对话框中单击“打开”或“取消”。在FireFox中，对话框似乎不会使线程休眠，并且匿名函数会立即启动——即使对话框仍处于启动状态

---

我在想我可以使用onchange事件，或者FireFox中的其他东西来模拟IE的行为，但到目前为止还没有任何运气。在用户单击对话框中的“打开”或“取消”后，如何执行代码？

您可以启动一个间隔计时器，每100毫秒左右检查一次

$('input:file').click(function() {
  var file = this, form = this.form, val = this.value, interval;
  function checkValue() {
    if (file.value !== val) {
      cancelInterval(interval);
      form.submit();
    }
  }
  interval = setInterval(checkValue, 100);
});

问题是，这有点脆弱，因为文件输入的“值”不是一个完整的路径。但是，由于您无论如何都要提交整个表单，因此用户实际上没有机会多次单击file元素

---

编辑-这是假定“更改”事件确实不适合您；我目前没有Firefox可供查看。

使用：

onchange=“submitForm（）”

当您单击文件上载时，请告诉jQuery对其进行聚焦，当您选择一个文件并单击打开/取消时，它将失去聚焦

$(function() {
    $("#fileUpload").click(function() {
        $(this).focus();
    });
    $("#fileUpload").blur(function() {
        alert("blurred");
    });
});

---

我在chrome上对此进行了测试。

您可以聚焦控件，然后当对话框关闭时，您可以响应文件上载控件的模糊事件。看看下面我的答案。哇！我刚刚意识到，我的测试用例搞砸了，在运行这个测试用例时，我没有正确连接事件处理程序。我在FF3.6、IE9、IE6和Chrome中对此进行了测试，它在所有这些版本中都能正常工作。我不敢相信我犯了这么愚蠢的错误。谢谢不客气。我喜欢最简单的解决方案真正起作用的时候！