JavaScript原生实现多图异步上传与预览：通过input[multiple]获取FileList，用URL.createObjectURL生成本地预览；用FormData.append('images[]', file)打包上传；fetch提交，XMLHttpRequest监听进度；需释放blob URL、校验文件、处理错误。
JavaScript 中用 Ajax 实现多图异步上传与预览，核心是结合 FileList、FormData、XMLHttpRequest 或 fetch，以及 URL.createObjectURL() 做客户端预览。整个流程不依赖第三方库，原生即可完成。
获取并预览多张图片
用户选择文件后，先遍历 input.files，为每张图生成本地预览 URL，并插入页面显示：
- 使用
<input type="file" multiple accept="image/*">允许多选图片 - 监听
change事件，读取e.target.files - 对每个
File对象调用URL.createObjectURL(file)，返回临时 blob URL - 创建
<img>标签，设置src为该 URL，追加到预览容器中
构造 FormData 并上传
上传时需将多个文件打包进 FormData，注意字段名带 [] 便于后端接收数组：
- 新建
const formData = new FormData() - 循环遍历
files，用formData.append('images[]', file)添加（后端如 PHP 可直接用$_FILES['images']） - 可额外添加其他字段，如
formData.append('album_id', 123) - 推荐用
fetch提交：fetch('/upload', { method: 'POST', body: formData })
处理上传进度与响应
上传过程可监听进度，响应则解析 JSON 结果：
立即学习“Java免费学习笔记（深入）”；
-
fetch本身不支持上传进度，如需显示进度条，改用XMLHttpRequest并监听upload.onprogress - 成功后服务端应返回结构化数据，例如
{ success: true, urls: ['/uploads/a.jpg', '/uploads/b.jpg'] } - 前端拿到响应后，可把返回的服务器 URL 替换掉预览图的
src，实现“本地预览 → 上传完成 → 显示线上地址”闭环
注意事项与优化点
实际开发中容易忽略但影响体验的细节：
- 每次选择新文件前，记得调用
URL.revokeObjectURL()释放旧的 blob URL，避免内存泄漏 - 限制文件类型和大小，例如过滤掉非图片或超过 5MB 的文件，提升健壮性
- 上传失败时给出明确提示（如网络错误、后端报错），并保留已预览图片方便重试
- 移动端要注意
input[type=file]在 iOS 上可能不触发change，可加click()模拟触发作为兜底
