无法直接修改input[type="file"]的files属性，因其为只读FileList；应先清空input.value，再用DataTransfer收集保留文件并赋值给input.files，但Safari不支持该赋值需降级处理。
点击按钮后 input[type="file"] 列表不更新？
浏览器原生的 <input type="file"> 没有提供直接删除某一项的 API，它的 files 属性是只读的 FileList 对象。你不能通过 files.splice() 或赋值 files = new DataTransfer().files 来修改它——这些操作在大多数浏览器里会静默失败或抛出 TypeError。
真正可行的路径是：用 DataTransfer 构造新列表，再把 input.files 替换为它的 .files ——但注意，这只能通过设置 input.files 为 DataTransfer 实例的 .files（仅部分浏览器支持），更稳妥的做法是**清空 input 并重建文件列表**。
用 DataTransfer 手动重建文件列表
这是目前兼容性最好、可控性最强的方式。核心逻辑是：把想保留的文件用 DataTransfer 收集起来，再赋给 input.files（需触发一次 input 的 value 清空 + 重设）。
- 先调用
input.value = ""清空原始选择状态（否则后续 setAttribute 或赋值无效） - 创建
const dt = new DataTransfer() - 遍历原始
input.files，用dt.items.add(file)添加你想保留的项 - 最后用
input.files = dt.files—— 注意：这个赋值在 Chrome/Firefox/Edge 110+ 可行，Safari 仍不支持，需降级处理
示例代码：
立即学习“前端免费学习笔记（深入）”；
function removeFileAt(input, index) {
const dt = new DataTransfer();
for (let i = 0; i < input.files.length; i++) {
if (i !== index) dt.items.add(input.files[i]);
}
input.value = ""; // 必须清空，否则赋值被忽略
input.files = dt.files; // Chrome/Firefox/Edge OK；Safari 需 fallback
}
Safari 不支持 input.files = dt.files 怎么办？
Safari 目前（截至 Safari 17.5）仍拒绝写入 input.files，所以必须绕过原生 input，改用「自管理文件列表」：隐藏原生 input，用自定义 UI 显示文件名、删除按钮，所有文件数据存在 JS 变量里，提交时再构造 FormData。
- 监听
input的change事件，把e.target.files转为数组存到let currentFiles = [...e.target.files] - 渲染一个列表，每项带
data-index和删除按钮 - 点击删除时，用
currentFiles.splice(index, 1)修改数组，再重新渲染列表 - 提交时，用
new FormData()手动 append 每个currentFiles[i]
这样完全脱离原生 files 的限制，也避免了 Safari 的兼容问题。
为什么不能直接删 DOM 节点来“隐藏”上传项？
有人尝试用 CSS 隐藏 <input> 后面生成的文件名文字（比如某些 UI 库自动渲染的），或者删掉外层容器——这毫无意义。因为 input.files 是独立存在的，DOM 渲染只是视觉反馈，不影响实际选中的文件集合。用户提交时，浏览器仍然会上传全部 input.files 中的文件。
关键点始终只有一个：**必须改变 input.files 的内容，或彻底放弃依赖它**。
真正要删的是数据，不是样式。别被界面迷惑。
