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

Question

因此，场景如下 -

与 StackOverflow 上关于如何调用 input[type=file] 元素上的单击事件的 3000 个其他问题不同，我只想对此做出回应。我正在寻找类似的内容：

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

我不想在元素上调用 click() ，我只是想知道何时有人选择了文件，以便我们可以提交表单。在 IE 中，它按预期工作，因为文件对话框会休眠 javascript 线程，直到用户单击对话框中的“打开”或“取消”。在 FireFox 中，对话框似乎不会休眠线程，并且匿名函数会立即触发 - 即使对话框仍然处于运行状态。

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

Answer 1

当您单击文件上传时，告诉 jQuery 将其聚焦，当您选择一个文件并单击打开/取消时，它将失去焦点，即模糊。

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

我在 Chrome 中测试了这个。

Answer 2

使用：onchange="submitForm()"

Answer 3

那么您可以启动一个间隔计时器，每隔 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);
});

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

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