html5 multiple属性仅支持多选文件，批量上传+预览需结合filelist api和url.createobjecturl()；通过监听change事件、过滤图片、生成临时url并动态创建img标签实现预览，再用formdata批量上传。
HTML5 的 multiple 属性本身只是允许用户在文件选择框中选中多个文件，真正实现“批量上传 + 预览”需要结合 <input type="file" multiple>、JavaScript 的 FileList API 和 URL.createObjectURL()（或 FileReader）来完成。核心在于读取多个文件并为每张图片生成可预览的临时 URL。
1. 基础 HTML 结构：启用多图选择
只需在 <input type="file"> 中添加 multiple 和 accept="image/*" 属性，限制只选图片：
2. 使用 createObjectURL 实现快速预览（推荐）
这是最轻量、响应最快的预览方式，适用于现代浏览器。每个 File 对象可通过 URL.createObjectURL(file) 生成一个指向本地文件的临时 URL，直接用于 <img src>：
示例 JS 逻辑：
- 监听
change事件，获取event.target.files（返回FileList） - 遍历所有选中的
File，过滤出图片类型（file.type.startsWith('image/')） - 对每个合法图片调用
URL.createObjectURL(file)，生成预览 URL - 动态创建
<img>标签并插入到预览容器中 - 注意：页面卸载前应调用
URL.revokeObjectURL()释放内存（尤其大量图片时）
3. 处理上传逻辑：FormData 批量提交
预览完成后如需上传，可将多个 File 追加进同一个 FormData 对象，后端接收时按字段名（如 images[]）解析数组：
for (const file of fileInput.files) {
if (file.type.startsWith('image/')) {
formData.append('images[]', file, file.name); // 第三个参数保留原始文件名
}
}
fetch('/upload', { method: 'POST', body: formData });
4. 注意事项与兼容性补充
-
multiple在 IE10+ 及所有现代浏览器中支持良好；IE9 及以下不支持，需降级为单文件多次选择 -
createObjectURL生成的 URL 是内存引用，不是 Base64，性能优于FileReader.readAsDataURL - 移动端 Safari 对大图预览可能有内存限制，建议预览前检查
file.size（如 >5MB 可提示压缩） - 若需获取图片宽高、EXIF 等信息，必须使用
FileReader+Image对象解析，不能仅靠createObjectURL
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
