关于input file类型元素使用querySelector及input事件的行为疑问

这是浏览器对文件选择输入框（<input type="file">）的默认行为导致的：

• 当你打开文件选择对话框后，无论最终是选择了新文件，还是点击「取消」按钮关闭对话框，浏览器都会触发input事件，并且同步更新该输入框的files集合：
  • 如果选择了新文件，files会被替换为新选中的文件列表；
  • 如果点击「取消」，浏览器会将files集合重置为空（length = 0），哪怕之前已经有选中的文件。

浏览器的这种设计逻辑是：文件选择对话框的每一次打开操作，都被视为独立的选择行为——用户取消选择，意味着本次操作没有选择任何文件，因此浏览器会将输入框的文件状态重置为“未选择”，覆盖之前的状态。

另外你的代码存在一处变量名不一致的问题：通过document.querySelector("#image")获取的元素变量是selectImg，但事件监听却用了未定义的image，会引发报错，修正后代码如下：

const selectImg = document.querySelector("#image");
selectImg.addEventListener("input", () => {
  let isFileExists = selectImg.files.length;
  console.log(isFileExists);
});

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