当用户删除表格中某文件后，再次选择同一文件无法重新添加，根本原因是 的 change 事件不会重复触发相同文件路径——需手动重置 input.value 才能恢复事件监听。
当用户删除表格中某文件后，再次选择同一文件无法重新添加，根本原因是 `` 的 `change` 事件不会重复触发相同文件路径——需手动重置 `input.value` 才能恢复事件监听。
该问题源于浏览器对 元素的底层行为：change 事件仅在文件选择值发生实际变更时触发。若用户先选择 x.png → 添加到表格 → 删除该行 → 再次点击“Add Files”并重新选中 x.png，由于 的 value 属性仍为 "x.png"（未改变），浏览器认为“无变化”，故不触发 onchange，导致 handleFiles() 不被执行。
✅ 正确解决方案是在每次成功处理文件后，立即将文件输入框的 value 重置为空字符串，强制解除状态锁定，确保下一次选择（即使是同一文件）都能触发事件：
<input type="file" id="tableFiles" style="display: none" multiple onchange="handleFiles(this.files); this.value = ''"> />
或在 JavaScript 中统一处理（更推荐，便于维护）：
function handleFiles(files) {
const tbody = document.querySelector(".files-table tbody");
for (const file of files) {
const fileName = file.name;
const isDuplicate = Array.from(tbody.rows).some(
(row) => row.cells[0].textContent === fileName
);
if (!isDuplicate) {
const row = tbody.insertRow();
const filenameCell = row.insertCell(0);
const typeCell = row.insertCell(1);
const statusCell = row.insertCell(2);
const dateCell = row.insertCell(3);
const deleteCell = row.insertCell(4);
filenameCell.textContent = fileName;
typeCell.textContent = getFileType(file.type);
statusCell.textContent = "Pending";
const currentDate = new Date();
dateCell.textContent = currentDate.toISOString().split("T")[0];
const deleteIcon = document.createElement("i");
deleteIcon.className = "fa-regular fa-trash-can";
deleteIcon.style.color = "#d90000";
deleteIcon.addEventListener("click", () => deleteRow(deleteIcon));
deleteCell.appendChild(deleteIcon);
}
}
checkIconVisibility();
}
// 在调用 handleFiles 后，重置 input 值（推荐在绑定事件时统一处理）
document.getElementById("tableFiles").addEventListener("change", function (e) {
handleFiles(e.target.files);
e.target.value = ""; // ✅ 核心修复：清空 input 值，释放事件锁
});
⚠️ 注意事项：
- 不要仅依赖 onchange="..." 内联写法：逻辑耦合度高，难以调试和复用；推荐使用 addEventListener 进行解耦；
- 拖放（Drag & Drop）不受此限制：handleDrop() 直接读取 event.dataTransfer.files，无需依赖 input.value，因此 x.png 通过拖入可重复添加；
- 重置 value 不影响用户体验： 本身不显示路径，清空操作对界面无感知；
- 若需支持取消选择后再重选，此方案同样适用——它确保了输入控件始终处于“可触发状态”。
总结：这不是代码逻辑缺陷，而是浏览器规范行为。通过主动重置 input.value = ''，即可彻底解决“已删文件无法重加”的问题，同时保持代码健壮性与可维护性。
