文件删除后无法再次添加，是因为 的 change 事件在重复选择同一文件时不会触发——其 value 未发生变更。只需在处理完文件后手动清空 input.value，即可重置状态，确保后续重复选择（包括刚删掉的文件）能正常触发事件。
文件删除后无法再次添加，是因为 `` 的 `change` 事件在重复选择同一文件时不会触发——其 `value` 未发生变更。只需在处理完文件后手动清空 `input.value`，即可重置状态，确保后续重复选择（包括刚删掉的文件）能正常触发事件。
在基于文件上传的表格管理功能中，一个常见但易被忽视的问题是：用户删除某文件行后，尝试立即重新选择同一个文件（如 x.png）却无响应。这并非逻辑错误或 DOM 操作异常，而是浏览器对 元素的原生行为限制所致。
? 问题根源：change 事件的触发条件
HTML 文件输入框的 change 事件仅在 input.value 实际发生变化时触发。当用户两次选择完全相同的文件（路径、名称、内容均一致），浏览器会认为 value 未改变，因此不派发事件——即使该文件此前已被从表格中删除。这意味着 handleFiles() 根本不会执行，自然无法校验重复、插入新行或更新 UI。
✅ 正确解法：主动重置 input.value
在 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();
}
// 绑定事件时重置 input 值
document.getElementById("tableFiles").addEventListener("change", function (e) {
handleFiles(e.target.files);
e.target.value = ""; // ? 关键修复：每次选择后强制清空 value
});
? 注意：
e.target.value = ""必须在handleFiles()之后执行，否则e.target.files将为空（因files是value的只读映射）。
⚠️ 补充说明与最佳实践
-
不影响拖放上传：
handleDrop()使用dataTransfer.files，不依赖input.value，因此拖放操作天然不受此限制，无需额外处理。 -
不破坏用户体验：清空
value不会影响已成功添加的文件记录，仅重置输入框的内部状态，为下一次选择做好准备。 -
避免内存泄漏风险：
this.value = ''是安全操作，不会导致事件监听器失效或 DOM 引用残留。 - 兼容性良好：该方案在所有现代浏览器（Chrome、Firefox、Edge、Safari）中均稳定有效。
通过这一简明修正，用户即可自由删除并重新添加任意文件——无论是否曾存在于当前表格中，彻底消除“刚删不能重选”的交互断点，提升文件管理流程的健壮性与可用性。
