input[type="file"] 确定用户是否未选择任何文件

Question

当用户单击输入[type =“file”]时，它会显示一个弹出窗口以选择文件

用户可以选择一项并单击“确定”或单击“取消”

当他们单击“确定”时 - 这是 onChange 事件，太棒了

取消时 - 没有活动或我不知道

所以问题是：

当用户单击“取消”时会触发什么事件，或者如何以不同方式确定单击“取消”后没有选择任何文件？

Answer 1

当用户通过单击文件输入启动文件上传时，您可以向浏览器窗口添加事件侦听器以查看它何时重新获得焦点。由于系统对话框是阻塞/模态的，因此只有当对话框关闭时窗口才会重新获得焦点。

在事件处理函数中，您可以检查输入的值是否更改。最后，删除焦点事件处理程序，这样它就不会从正常的 alt-tab 或窗口焦点事件中触发：

file.addEventListener("click", function () {
  window.onfocus = function () {
    console.log("The window was re-focused from the file input dialog");

    if (file.files.length === 0) {
      console.log("NO files were added");
    } else {
      console.log("Files were added");      
    }

    // Remove the handler
    window.onfocus = null;
  };
});

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