需用array.from(input.files)转为数组遍历，通过name、size等属性实时渲染文件列表至，动态添加带data-index的并委托父容器监听删除事件，维护selectedfiles数组更新视图，ios旧版safari需检测并降级为单文件上传。
如何让选中的多文件在页面上实时显示为列表
用户点了“选择文件”后，得立刻看到自己挑了哪些，否则容易重复点、误操作或怀疑没生效。这不能靠 input.value——它只返回 C:\fakepath\... 这种伪造路径，且永远只显示第一个文件名。
真正要读的是 input.files，但它是个只读的 FileList，不是数组，直接 .forEach() 会报 TypeError: not a function。
- 用
Array.from(input.files)转成真数组再遍历，最稳妥 - 每个
file对象有name、size、type、lastModified，够做基础展示 - 别对整个
input.files调JSON.stringify()——结果是空对象，因为FileList不可序列化 - 列表容器建议用
<ul id="file-list"></ul>，每条<li>带删除按钮，方便后续取消某个文件
为什么文件列表渲染后点击删除没反应
常见原因是事件委托没配好：你动态生成的 <li> 元素，在 DOM 加载时并不存在，直接给它们绑 click 会失效。
正确做法是监听父容器（比如 #file-list），用事件冒泡捕获子元素点击：
document.getElementById('file-list').addEventListener('click', (e) => {
if (e.target.classList.contains('remove-file')) {
const index = parseInt(e.target.dataset.index);
// 从原始 files 数组中移除对应项（注意：FileList 不可变，需重建）
}
});
-
FileList是只读的，删文件不是从它里面删，而是维护一个独立的selectedFiles数组，删完再重绘列表 -
data-index记录原始顺序，避免因重排导致错位 - 删完别忘了同步更新
input的显示状态（比如清空input.value再设回空字符串，触发 UI 刷新）
大文件或大量文件时列表卡顿怎么缓解
选 50 个文件，逐个创建 FileReader 预览图片？内存暴涨、主线程卡死是必然的。预览不是必须项，列表展示文件名+大小就够了。
- 优先显示
file.name和(file.size / 1024).toFixed(1) + ' KB'，不碰二进制内容 - 真要预览缩略图，只对前 5 个图片文件做
URL.createObjectURL(file)，其余跳过 - 每次调
URL.createObjectURL()后，记得在移除对应<li>时执行URL.revokeObjectURL(url)，否则内存泄漏 - 如果用户一次拖入上百个文件，先截断到
Math.min(files.length, 20)并提示“最多支持 20 个”，比等页面卡死更友好
iOS Safari 下列表始终只显示一个文件
不是代码问题，是系统限制：iOS Safari 16.3 及更早版本会静默忽略 multiple 属性，input.files.length 永远是 1，且无任何错误提示。
检测方式必须写死：
const isIOSOldSafari = /iPhone|iPad|iPod/.test(navigator.userAgent) && /OS [1-9]\d?_[0-3]/.test(navigator.userAgent);
- 检测为真时，直接禁用多选功能，改用单文件多次上传流程，并提示“请升级 iOS 或使用 Chrome 浏览器”
- 别试图用 JS 模拟多次点击绕过——系统级限制，无效
- 这个判断必须放在
change事件里，不能只 onload 执行一次，因为用户可能中途换设备
最麻烦的不是写逻辑，是记住：文件列表显示依赖 input.files，而这个对象在旧 iOS 上根本不可信。所有基于它的长度判断、循环、索引取值，都得加兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
