加了 multiple 属性的 file input 不显示文件列表，需用 JavaScript 读取 input.files 并手动渲染；须转 FileList 为真数组、防 XSS、管理删除同步、用 URL.createObjectURL 预览并及时释放、页面刷新后状态需自行维护。
加了 multiple 属性的 <input type="file"> 本身不显示任何文件列表，必须用 JavaScript 读取 input.files 并手动渲染 DOM。
监听 change 事件并遍历 input.files
用户选择文件后，change 事件触发，但 e.target.files 是只读的 FileList（类数组），不能直接用 .map() 或 .forEach()（IE10–11 不支持）。
- 务必用
Array.from(e.target.files)或[...e.target.files]转成真数组 - 别只取
e.target.files[0]—— 多选时其余文件会被忽略 -
files.length === 0不能用来判断“是否取消选择”，因为取消后事件仍触发、files为空但不是错误状态 - 每个
File对象有name、size、lastModified，单位是字节，需手动换算（如(f.size / 1024).toFixed(1) + ' KB'）
渲染文件名+大小，避免 XSS 和性能问题
直接拼接 HTML 字符串插入 innerHTML 简单，但有风险：若文件名含 <script></script> 类字符可能被解析；上百个文件时频繁重排重绘也卡顿。
- 对
f.name做基础转义：f.name.replace(/, '/g, '>') - 大量文件建议用
document.createDocumentFragment()批量插入，减少 DOM 操作次数 - 别在循环里反复设置
innerHTML，应一次生成完整字符串或 Fragment 后统一挂载 - 展示时间用
new Date(f.lastModified).toLocaleString()，别直接输出毫秒戳
带删除功能时，必须同步管理文件数组和 DOM
界面上的“删除”按钮只是移除 DOM 元素，如果没同步清理对应 File 对象，提交时仍会上传已删文件。
立即学习“前端免费学习笔记（深入）”；
- 不要用
file.name当唯一 key —— 重名文件、中文路径、特殊符号都可能导致误删 - 推荐在生成预览项时，用
data-index记录当前文件在数组中的下标 - 点击删除时，先按
data-index对维护的文件数组调用splice(index, 1)，再删 DOM 节点 - 每次重新渲染列表前，清空容器内容，再基于最新数组重建，避免状态错乱
- 若需预览缩略图，用
URL.createObjectURL(file)，但记得在删除后立即调用URL.revokeObjectURL(url)防止内存泄漏
最易被忽略的一点：浏览器不会帮你做“已选文件”的持久化。页面刷新后 input.files 彻底清空，所有 UI 状态必须由你维护的数组驱动，而不是依赖原生 input 的实时值。
