无法直接修改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
<h3>Safari 不支持 <code>input.files = dt.files</code> 怎么办？</h3>
<p>Safari 目前（截至 Safari 17.5）仍拒绝写入 <code>input.files</code>，所以必须绕过原生 input，改用「自管理文件列表」：隐藏原生 <code>input</code>，用自定义 UI 显示文件名、删除按钮，所有文件数据存在 JS 变量里，提交时再构造 <code>FormData</code>。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img
src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a>
<p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 监听
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 的内容，或彻底放弃依赖它**。
真正要删的是数据，不是样式。别被界面迷惑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
