如果输入文件为空，则不会触发 onchange 事件

Question

我有这个函数，它要求用户提供一个文件，如果选择则返回文件，如果没有选择任何内容，则（应该）返回 null。

async pickFile(allowed_extensions?: string[]): Promise<File | null> {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = allowed_extensions?.join(',') ?? '*';
    input.click();

    return new Promise((resolve) => {
        input.onchange = () => {
            if (input.files && input.files.length > 0) {
                resolve(input.files[0]);
            } else {
                resolve(null);
            }
        };
    });
}

如果我选择一个文件并确认，它就可以正常工作。但是，如果我关闭选择窗口，似乎不会触发 onchange 事件。这种行为是预期的吗？如果是的话我该如何处理？

可重现的示例

Answer 1

onchange

关闭窗口时不会触发。

您应该向

cancel

事件添加另一个事件侦听器，该事件将在您关闭弹出窗口时触发：

function pickFile() {
  const input = document.createElement('input');
  input.type = 'file';
  input.click();
  return new Promise((resolve) => {
    input.onchange = () => {
      console.log('onchange triggered');
      if (input.files && input.files.length > 0) {
        resolve(input.files[0]);
      } else {
        resolve(null);
      }
    };
    input.addEventListener("cancel", () => {
        console.log('Input canceled');
      resolve(null)
    });
  });
}

<button type="button" onclick="pickFile()">Click Me!</button>