避免HTML 中文件输入取消时意外关闭的教程

<button id="openDialogButton">打开对话框</button>

<dialog id="dialog">
  <h1>你好，我是一个对话框！</h1>
  <input type='file'>
  <p><button id="closeDialogButton">关闭对话框</p>
</dialog>

const buttonOpen = document.querySelector("#openDialogButton");
const buttonClose = document.querySelector("#closeDialogButton");
const dialog = document.querySelector("#dialog");

buttonOpen.addEventListener("click", () => {
  dialog.showModal();
});

buttonClose.addEventListener("click", () => {
  dialog.close();
});

// 尝试阻止对话框关闭，但对文件输入无效
dialog.addEventListener("cancel", (e) => {
  console.log("对话框取消事件触发", e);
  e.preventDefault(); // 这并不能阻止文件输入导致的关闭
});

<dialog id="dialog">
  <form id="form">
    <label>存在Bug的输入框 (仅作对比)</label>
    <input type="file" /> <!-- 这个输入框会触发bug -->

    <label>修复后的输入框</label>
    <div id="pick-file-wrapper">
      <button id="pick-file-button" type="button">选择文件</button>
      <span id="file-name">未选择文件</span>
      <!-- 这是一个隐藏的占位符，或者完全通过JS创建 -->
      <input id="pick-file-input" type="file" style="display: none;" />
    </div>
  </form>
</dialog>
<button id="button">打开对话框</button>

/** @type {HTMLDialogElement} */
const dialog = document.getElementById("dialog");
/** @type {HTMLButtonElement} */
const openDialogButton = document.getElementById("button");
openDialogButton.addEventListener("click", () => dialog.showModal());

/** @type {HTMLButtonElement} */
const pickFileButton = document.getElementById("pick-file-button");
/** @type {HTMLSpanElement} */
const fileNameSpan = document.getElementById("file-name");

// 为自定义文件选择按钮添加点击事件监听器
pickFileButton.addEventListener("click", handlePickFileByCustomButton);

// 用于生成动态文件输入框的ID
const filePickerId = "dynamic-file-picker";

/**
 * 异步函数，处理通过自定义按钮触发的文件选择逻辑。
 */
async function handlePickFileByCustomButton() {
  const files = await pickFile(); // 调用文件选择器

  // 获取当前用于文件选择的隐藏input元素
  /** @type {HTMLInputElement} */
  const currentFileInput = document.getElementById("pick-file-input"); 

  // 创建一个新的input元素，替换掉旧的，以确保下次选择时行为正常
  const newFileInput = document.createElement("input");
  newFileInput.type = "file";
  newFileInput.id = "pick-file-input"; // 保持ID一致
  newFileInput.style.display = "none"; // 保持隐藏

  // 迁移旧input的属性到新input（例如：accept, multiple等）
  migrateElementAttributes(currentFileInput, newFileInput);

  // 替换旧的input元素
  currentFileInput.parentElement.replaceChild(newFileInput, currentFileInput);

  // 更新UI显示选中的文件名
  if (files && files.length > 0) {
    fileNameSpan.innerText = Array.from(files)
      .map((fileItem) => fileItem.name)
      .join(", ");
  } else {
    fileNameSpan.innerText = "未选择文件";
  }
}

/**
 * 封装文件选择逻辑，返回一个Promise，在文件选择完成后resolve FileList。
 * @returns {Promise<FileList>}
 */
function pickFile() {
  return new Promise((resolve, reject) => {
    /** @type {HTMLInputElement} */
    let inputTag = document.getElementById(filePickerId);

    // 如果动态input元素不存在，则创建它并添加到body
    if (!inputTag) {
      inputTag = document.createElement("input");
      inputTag.type = "file";
      inputTag.id = filePickerId;
      inputTag.style.display = "none"; // 确保它是隐藏的
      document.body.appendChild(inputTag);
    }

    // 设置onchange事件处理器
    inputTag.onchange = () => {
      if (!inputTag?.files || !inputTag?.value) {
        // 用户取消选择或未选择文件
        resolve(null); // 或者 resolve(new FileList())
        inputTag.value = ''; // 清空value，以便下次选择相同文件也能触发onchange
        return;
      }
      resolve(inputTag.files);
      inputTag.value = ''; // 清空value，以便下次选择相同文件也能触发onchange
    };

    // 模拟点击隐藏的input元素，触发文件选择器
    inputTag.click();
  });
}

/**
 * 将源元素的属性复制到目标元素，跳过 'files' 和 'value' 属性。
 * @argument {HTMLInputElement} templateElement - 源元素
 * @argument {HTMLInputElement} targetElement - 目标元素
 */
function migrateElementAttributes(templateElement, targetElement) {
  Array.from(templateElement.attributes).forEach((attr) => {
    // 避免复制 'files' 和 'value'，因为它们是动态的或用户操作结果
    if (attr.name !== "files" && attr.name !== "value") {
      targetElement.setAttribute(attr.name, attr.value);
    }
  });
}

#pick-file-wrapper {
  width: 252.5px; /* 示例宽度 */
  display: flex;
  align-items: center;
  gap: 4px;
}
#pick-file-button {
  max-width: 253px;
  font-size: smaller;
  flex-shrink: 0;
  flex-grow: 0;
}
#file-name {
  font-size: 13px;
  font-family: sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: auto; /* 允许文件名文本伸缩 */
}
#form {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 4px 8px;
}