核心是用url.createobjecturl()在客户端即时预览图片，不依赖服务器；监听file input的change事件，为每个文件生成blob url并赋给img src，配合accept和multiple属性，维护selectedfiles数组同步增删，提交时用formdata上传。
在提交前展示图片缩略图，核心是用浏览器原生能力在客户端完成预览，不依赖服务器。关键不是“上传”，而是“选中即预览”——用户点选或拖入图片后，立刻生成可查看的缩略图，且与最终提交的文件保持一致。
监听文件选择并快速生成预览
给 <input type="file"> 绑定 change 事件，获取 event.target.files 列表。对每个文件调用 URL.createObjectURL(file)，它会返回一个临时 URL（如 blob:https://xxx/abcd-1234），直接赋给 <img src> 即可毫秒级显示。
- 比
FileReader.readAsDataURL()更轻量，尤其适合多图或大图，避免 Base64 编码带来的内存压力 - 必须配合
accept="image/*"属性限制类型，防止非图文件触发无效预览 - 若支持多图，
<input>需加multiple属性，并遍历files数组逐个创建<img>
组织预览区域并支持移除操作
预览容器建议用 <div class="preview-grid">，CSS 设置 <code>display: flex; flex-wrap: wrap; gap: 8px; 实现整齐缩略图流。每张缩略图外层包裹一个带删除按钮的卡片：
- 为每个
<img>添加data-index或关联其src对应的原始File对象索引 - 点击删除时，从预览区移除对应 DOM 元素，并立即调用
URL.revokeObjectURL(src)释放内存 - 不修改
input.files（它是只读的），而是维护一个独立的selectedFiles = []数组，增删都同步更新该数组
提交时确保上传真实选中的文件
表单提交不能靠 input.files 直接发——因为用户可能删过图，而它不可变。正确做法是：在提交前，用 FormData 手动追加当前 selectedFiles 中的每个文件：
const fd = new FormData(); selectedFiles.forEach(f => fd.append('images', f));- 后端接收时按字段名（如
images）解析多个文件，顺序和预览一致 - 若需额外信息（如文件名、顺序号），可在
fd.append()时一并传字符串字段
基础 HTML 结构示例
简洁实用即可，无需复杂框架：
<input type="file" id="uploader" accept="image/*" multiple><div class="preview-grid" id="previewArea"></div> <button type="submit">提交所有图片</button>
搭配少量 CSS 控制缩略图尺寸（如 max-width: 120px; height: auto;）和边框阴影，视觉清晰、操作明确。
