JavaScript中的"文件对话框取消"事件

Question

我有一个文件输入:

<input type=file id=file onchange='foo(this.files)'/>

仅当用户在文件上载对话框中选择某个文件并单击"确定"时,才会调用函数"foo".当用户点击对话框中的"取消"按钮时,是否会触发任何事件？仅HTML5解决方案是可以的.

Answer 1

没有事件（仅change/input当您单击一个文件时已选择一个文件时才会触发该事件，因为它会更改为零所选项目），因此这并不能真正回答您的问题。现在我唯一能想到的就是利用单击按钮时打开的对话框。

当前的行为（正如我在 Chrome 中检查的那样）是在单击输入并显示对话框时失去窗口焦点，并且不可能再次获得窗口上的焦点，因为当您尝试这样做时，您会获得焦点在对话框上。要获得窗口焦点，您需要强制关闭对话框。有了这些，我们就可以破解这样的东西：

const input = document.getElementById('inp');

let timeout = null;
let dialogopen = false;
function checkFiles() {
  dialogopen = false;
  console.log("File count:", input.files.length);
}
input.addEventListener('change', (event) => {
  clearTimeout(timeout);
  checkFiles();
});
input.addEventListener('click', (event) => {
  clearTimeout(timeout);
  dialogopen = true;
});
window.addEventListener('focus', (event) => {
  if (dialogopen) {
    clearTimeout(timeout);
    timeout = setTimeout(checkFiles, 100);
  }
});

Click me: <input type="file" id="inp" />

也许这对将来的人有帮助。