本文旨在解决HTML Dialog元素中，由于Chromium浏览器的一个已知Bug（#1449848）导致的文件选择问题。该Bug表现为，当用户在Dialog中的 <input type="file"> 元素中取消文件选择或选择与之前相同的文件时，Dialog会意外关闭。虽然尝试使用 event.preventDefault() 阻止默认行为无效，但我们可以通过JavaScript模拟文件选择过程来规避此问题。
解决方案：自定义文件选择按钮
核心思路是创建一个自定义的按钮，通过JavaScript触发隐藏的 <input type="file"> 元素的文件选择行为。当文件被选择后，更新显示的文件名，并替换原来的 <input type="file"> 元素，从而避免Dialog关闭。
HTML 结构
首先，在Dialog中添加一个自定义的文件选择区域：
<dialog id="dialog">
<form id="form">
<label>Buggy input</label>
<input type="file" />
<label>Patched input</label>
<div id="pick-file-wrapper">
<button id="pick-file-button" type="button">Choose File</button>
<span id="file-name">No file chosen</span>
<input id="pick-file-input" type="file" />
</div>
</form>
</dialog>
<button id="button">Open dialog</button>其中：
立即学习“前端免费学习笔记（深入）”；
- pick-file-wrapper：包含自定义文件选择按钮和文件名显示区域。
- pick-file-button：自定义的文件选择按钮。
- file-name：用于显示已选择的文件名。
- pick-file-input：隐藏的 <input type="file"> 元素，用于触发文件选择。
CSS 样式
为了美观和功能性，可以添加以下CSS样式：
#pick-file-wrapper {
width: 252.5px;
display: flex;
align-items: center;
gap: 4px;
}
#pick-file-input {
display: none;
}
#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;
}JavaScript 代码
以下JavaScript代码实现了文件选择的模拟和更新：
/** @type {HTMLDialogElement} dialog */
const dialog = document.getElementById("dialog");
/** @type {HTMLButtonElement} dialog */
const button = document.getElementById("button");
button.addEventListener("click", () => dialog.showModal());
/** @type {HTMLButtonElement} dialog */
const pickFileButton = document.getElementById("pick-file-button");
/** @type {HTMLSpanElement} dialog */
const fileName = document.getElementById("file-name");
pickFileButton.addEventListener("click", handlePickFileByCustomButton);
const filePickerId = "file-picker";
async function handlePickFileByCustomButton() {
const file = await pickFile();
/** @type {HTMLInputElement} dialog */
let inputTag = document.getElementById(filePickerId).cloneNode();
/** @type {HTMLInputElement} dialog */
const pickFileInput = document.getElementById("pick-file-input");
inputTag.style.display = pickFileInput.style.display;
migrateElementAttributes(pickFileInput, inputTag);
pickFileInput.parentElement.replaceChild(inputTag, pickFileInput);
fileName.innerText = Array.from(file)
.map((fileItem) => fileItem.name)
.join(", ");
}
/** @return {Promise<FileList>} */
function pickFile() {
return new Promise((resolve, reject) => {
/** @type {HTMLInputElement} dialog */
let inputTag = document.getElementById(filePickerId);
if (!inputTag) {
inputTag = document.createElement("input");
inputTag.type = "file";
inputTag.id = filePickerId;
inputTag.style.display = "none";
document.body.appendChild(inputTag);
}
inputTag.onchange = () => {
if (!inputTag?.files || !inputTag?.value) {
return;
}
resolve(inputTag.files);
};
inputTag.click();
});
}
/**
* Copy attributes from the existing input element to the new input element
*
* @argument {HTMLInputElement} templateElement
* @argument {HTMLInputElement} targetElement
*/
function migrateElementAttributes(templateElement, targetElement) {
Array.from(templateElement.attributes).forEach((attr) => {
if (attr.name !== "files" && attr.name !== "value") {
targetElement.setAttribute(attr.name, attr.value);
}
});
}代码解释：
- handlePickFileByCustomButton 函数：当自定义按钮被点击时触发，调用 pickFile 函数打开文件选择器。
- pickFile 函数：创建一个隐藏的 <input type="file"> 元素（如果不存在），并监听其 onchange 事件。当文件被选择时，resolve Promise，返回选中的文件列表。
- migrateElementAttributes 函数：将原始 <input type="file"> 元素的属性复制到新的元素上，保持样式和行为一致。
- 每次文件选择后，克隆一个新的input元素，并用它替换旧的input元素。
注意事项
- 内存泄漏: 上述代码可能存在内存泄漏问题，需要进一步测试和优化。
- 样式对齐: 自定义按钮的样式可能与原生 <input type="file"> 元素不完全一致，需要根据实际情况进行调整。
- 浏览器兼容性: 虽然此方案主要针对Chromium浏览器，但建议在其他浏览器中进行测试，确保兼容性。
总结
通过自定义文件选择按钮和JavaScript代码，我们可以规避Chromium浏览器中HTML Dialog元素的文件选择Bug，允许用户在不关闭Dialog的情况下重新选择或取消文件。虽然此方案并非完美，但可以作为临时解决方案，直到Chromium官方修复此Bug。在实际应用中，请务必注意内存泄漏问题，并根据需要调整样式和进行兼容性测试。
