检测用户何时使用文件输入选择文件

Posted 2023-03-05

【中文标题】检测用户何时使用文件输入选择文件

【英文标题】：Detect when a user chooses a file using a file input

【发布时间】：2011-03-14 05:27:11

【问题描述】：

如何检测用户何时使用 html 文件输入选择要上传的文件。这样我就可以自动提交表单了。

【参考方案1】：

文件上传元素在其内容发生更改时触发 onchange 事件。这是一个非常简洁的例子：

<input type="file" name="whatever" onchange="alert('Changed!');" />

编辑：哦，如果您想在他们选择某些内容时提交表单（尽管这可能会让您的用户有些困惑）：

<input type="file" name="whatever" onchange="this.form.submit();" />

【讨论】：

刚刚注意到您使用的是 jQuery，在这种情况下，您需要像 Reigel 建议的那样使用 change() 事件。

【参考方案2】：

试试

​

$('#inputfileID').change(function()
alert(0);
)​

【参考方案3】：

检测文件输入变化的普通 javascript 方法：

var fileInput = document.getElementById('inputfileID')
fileInput.addEventListener('change', function () 
  // Called when files change. You can for example:
  // - Access the selected files
  var singleFile = fileInput.files[0]
  // - Submit the form
  var formEl = document.getElementById('formID')
  formEl.submit()
, false);

顺便提一下：false 属性表示不使用捕获，即false 表示 DOM 树中的相关change 侦听器以自下而上的顺序执行。这是默认值，但您应该始终提供该属性以最大限度地提高兼容性。

另请参阅a SO answer about change event、MDN docs for addEventListener 和 a SO answer about form submission。