input[type="file"] 判断用户是否没有选择任何文件答案

【问题标题】：input[type="file"] Determining if user hasn't chosen any filesinput[type="file"] 判断用户是否没有选择任何文件
【发布时间】：2020-01-16 16:36:33
【问题描述】：

当用户点击一个 input[type="file"] 时，它会显示一个弹出窗口来选择一个文件

用户可以选择一个并单击确定或单击取消

当他们点击 OK - 这是 onChange 事件，很棒

取消时 - 没有事件或我不知道它

所以问题是：

当用户单击取消时会触发什么事件，或者如何确定在单击取消后没有选择任何文件？

【问题讨论】：

检查输入元素的files 属性并检查其长度。或value
How to determine if user selected a file for file upload?的可能重复
@ADyson 什么时候检查？当用户点击取消时我没有任何事件
在提交表单之前验证表单时这样做可能是有意义的
我想在 blur 事件触发时执行此操作，但问题是它在打开弹出窗口后立即触发，而不是在您通过单击取消关闭它之后触发

标签： javascript

【解决方案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;
  };
});

&lt;input id="file" type="file"&gt;

【讨论】：

【解决方案2】：

只需检查文件选择器节点的files 属性的length：

const input = document.querySelector ('input[type="file"]')
if(input.files.length === 0){
  //The user hasn't selected any files...
}

要检测更改，只需将事件侦听器添加到 change 事件：

const input = document.querySelector ('input[type="file"]')
input.addEventListener('change', ()=>{
  if(input.files.length === 0){
    //Cancel clicked
  } else {
    //The user selected some files just now
  }
})

【讨论】：

我什么时候应该这样做？当用户点击取消时我没有任何事件
不幸的是，当您没有选择任何内容并单击取消时，onChange 事件不会触发（Chrome、MacOS）但我怀疑它在任何地方都以相同的方式工作