用input[type="file"]实现多图选择需加multiple属性，通过FileReader转data URL渲染缩略图，用grid布局配合aspect-ratio和object-fit控制显示，自行维护selectedFiles数组管理文件而非修改只读的files。
用 input[type="file"] 实现多图选择但不自动上传
核心是禁用默认表单提交行为，只读取文件列表。必须加 multiple 属性，否则只能选一张：
<input type="file" id="fileInput" accept="image/*" multiple>。注意
accept="image/*" 能过滤非图片类型，但不能完全阻止用户绕过（比如改后缀），后续仍需 JS 校验 MIME 类型。别用 click() 模拟触发——移动端可能被拦截，老老实实放个隐藏 input + 自定义按钮更稳。
用 FileReader 把本地文件转成 data URL 渲染缩略图
选完文件后不能直接用 file.path（浏览器禁止访问本地路径），得靠 FileReader 异步读取。每个文件都要单独 new 一个 reader，否则会覆盖上一个的 onload 回调。常见坑：
- 循环里直接写
reader.onload = () => { thumbnails.push(result); }，结果所有回调都用最后一个result—— 必须用闭包或let声明变量 - 没处理
reader.onerror，比如超大文件读取失败，界面就卡住不动
file.size > 5 * 1024 * 1024 提前过滤。CSS 九宫格布局关键：用 display: grid 控制容器，aspect-ratio 锁定缩略图比例
容器设 grid-template-columns: repeat(3, 1fr)，间隙用 gap: 8px。每张缩略图用 <img alt="HTML文件上传怎么做成九宫格图片选择器" > 标签，src 是上一步生成的 data URL。重点：aspect-ratio: 1/1 比固定宽高更可靠，避免拉伸变形；再加 object-fit: cover 确保居中裁切。别忘了给图片加 width: 100%，否则 grid 项可能不占满格子。删除按钮建议用绝对定位盖在右上角，用 position: relative 包一层缩略图容器。
删图后如何同步更新 FileList 和 UI？根本没法直接改 input.files
input.files 是只读的 FileList 对象，JavaScript 无法修改它。所以必须自己维护一个数组（比如叫 selectedFiles），每次增删都操作这个数组，再重新渲染整个缩略图列表。删除某张图时，别只移除 DOM 节点——要按索引从 selectedFiles 里 splice 掉对应项，否则后续上传时顺序错乱、漏传。如果需要保留原始顺序，建议给每个 file 加个临时 ID（比如 Math.random().toString(36).substr(2, 9)），用 ID 做关联，而不是依赖数组下标。
立即学习“前端免费学习笔记（深入）”；
