如何跟踪是否使用 javascript 选择了文件？

Question

所以如果我有一个输入字段：

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

我单击它并选择一个文件，当我按下Open 时，我想提交表单并上传文件，而无需单击<input> 添加的按钮。

Answer 1

正如 goreSplatter 在下面指出的那样，请注意这种行为在用户体验方面并不令人意外。例如，使用像 GMail 那样将文件附加到电子邮件的东西来执行此操作可能是完全有效的；但除非用户有机会在事情完成之前取消这些附件等，否则您可能会掉入 UX 坑。但我希望您可能已经解决了用户体验方面的问题，并且没有做一些愚蠢的事情。 :-)

回答问题：您可以通过使用change 事件处理程序来做到这一点，例如onchange= 或通过addEventListener（或IE 上的attachEvent）等效的DOM2。

示例 (live copy)：

hookEvent(document.getElementById('fileInput'),
          'change',
          inputChanged);

function inputChanged() {
  display("The input's value changed");
}

...hookEvent 是连接事件处理程序的实用函数（请参阅下面的链接作为示例，但它没有经过优化；如果您使用像 jQuery、Prototype、@987654324 这样的库@、Closure 或 any of several others，它们将包含一种跨浏览器挂钩事件的方法。

上面链接的示例适用于 Chrome、Firefox 和 Opera for Linux，IE6 和 IE7 上适用于 Windows，因此总体上很可能得到很好的支持。