加了 multiple 属性的 file input 不显示文件列表，需用 JavaScript 读取 input.files 并手动渲染；须转 FileList 为真数组、防 XSS、管理删除同步、用 URL.createObjectURL 预览并及时释放、页面刷新后状态需自行维护。

加了 multiple 属性的 本身不显示任何文件列表，必须用 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> 类字符可能被解析；上百个文件时频繁重排重绘也卡顿。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 对 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 的实时值。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！