如何在JavaScript中检测文件选择窗口的关闭（取消）事件？

原生文件输入的change事件并没有直接提供用户取消选择的标识，不过可以通过结合focus事件与定时器的方式，间接判断用户是否关闭了文件选择窗口且未选择文件。

实现思路 #

• 用户点击文件输入框时，标记弹窗状态并记录当前文件列表长度（此时为空）
• 监听页面focus事件，当页面重新获得焦点时，检查文件输入框的文件列表是否仍与初始状态一致
• 加入短定时器避免误判（选择文件后页面同样会重新获得焦点）

具体代码实现 #

HTML部分：

<input type="file" />

JavaScript部分：

const input = document.querySelector("input");
let isFileDialogOpen = false;
let initialFilesCount = 0;

// 点击输入框时记录初始状态
input.addEventListener("click", () => {
  isFileDialogOpen = true;
  initialFilesCount = input.files.length;
});

// 文件选择后的处理逻辑
input.addEventListener("change", handleFileUpload);

// 通过页面焦点判断是否取消选择
window.addEventListener("focus", () => {
  if (isFileDialogOpen) {
    setTimeout(() => {
      if (input.files.length === initialFilesCount) {
        // 用户取消了文件选择，执行对应操作
        console.log("用户关闭了文件选择窗口");
      }
      isFileDialogOpen = false;
    }, 100);
  }
});

async function handleFileUpload(event) {
  isFileDialogOpen = false;
  const files = event.target.files;
  if (files.length === 0) return;
  await doUpload(files);
}

// 模拟上传函数（替换为实际逻辑）
async function doUpload(files) {
  console.log("开始上传文件", files);
}

注意事项 #

• 定时器时长建议设置在100ms左右，平衡浏览器焦点切换的误判概率
• 该方案依赖页面焦点变化，若用户打开弹窗后切换到其他应用再返回，也会触发判断，但能覆盖绝大多数常规场景
• 多文件选择场景同样适用，核心判断逻辑为文件列表长度是否与弹窗打开前一致

内容的提问来源于stack exchange，提问作者Rahul