HTML5 multiple属性仅支持多文件选择，真正批量图片上传需结合HTML结构（multiple+accept）、JavaScript预览（createObjectURL）与FormData提交，并配合服务端校验。
HTML5 中的 multiple 属性本身不上传文件，也不处理预览或校验，它只是开启「一次选多个文件」的能力。要实现真正可用的批量图片上传，需结合 HTML 结构、JavaScript 文件处理和 FormData 提交三部分协同工作。
基础 HTML 设置：启用多图选择并限制类型
在 上添加 multiple 和 accept="image/*"，可让浏览器只显示图片类文件，并支持 Ctrl/Cmd 多选或拖拽多图：
- 建议加上
name="images[]"（方括号形式），方便后端统一接收为数组 - 避免仅靠
accept做安全过滤——它只影响文件选择对话框的筛选，不能阻止用户绕过
前端图片预览：用 createObjectURL 动态生成缩略图
用户选图后，通过 input.files 获取 FileList，再对每个图片调用 URL.createObjectURL() 生成临时 URL，插入
- 监听
change事件，遍历event.target.files - 用
file.type.startsWith('image/')过滤非图片项（防用户手动修改文件后缀） - 每张图创建一个
- 页面卸载或重新选图前，记得调用
URL.revokeObjectURL(url)防内存泄漏
组装并上传：用 FormData 批量提交所有图片
预览不是目的，上传才是。把选中的图片逐个 append 到 FormData，用 fetch 或 XMLHttpRequest 发送到后端：
- 创建
const formData = new FormData() - 循环图片文件：
formData.append('images[]', file, file.name)（第三个参数保留原始文件名） - 可额外添加字段，如
formData.append('album_id', '123') - 发送时无需设置
Content-Type头——浏览器会自动设置为multipart/form-data并带上边界符
服务端接收与注意事项
前端传的是同名多值字段（如 images[]），后端必须按「多文件数组」方式解析，不能只取第一个：
- PHP 中通过
$_FILES['images']['name'][0]、['tmp_name'][0]等子数组访问每个文件 - Node.js（如 Express + multer）需配置
array('images')或使用fields([{ name: 'images', maxCount: 10 }]) - 务必在服务端再次校验文件类型、大小、数量——前端 JS 可被禁用或篡改
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
