JavaScript 文件上传预览核心是用 File API 读取文件，URL.createObjectURL() 生成临时 URL 渲染图片；上传则通过 FormData 和 fetch 发送至服务器，并注意内存释放与错误处理。
JavaScript 实现文件上传并预览图片，核心是利用 File API 读取本地文件，再通过 URL.createObjectURL() 创建临时 URL 渲染到 FormData 和 fetch（或 XMLHttpRequest）发送到服务器。
监听文件选择并读取图片
用户通过 选择文件后，可以从 event.target.files 获取 File 对象列表。只需取第一个（或遍历），用 FileReader 读取为 data URL：
- 确保
accept="image/*"限制只选图片（可选但推荐） - 检查
files.length > 0，避免空选择 - 使用
reader.readAsDataURL(file)将图片转为 base64 URL - 在
reader.onload回调中获取reader.result并赋值给
快速预览：用 createObjectURL 更轻量
相比 FileReader，URL.createObjectURL(file) 不解析内容，直接生成指向本地文件的内存 URL，性能更好、支持大图、且能保留原始格式（如 EXIF 信息）：
- 调用后得到类似
blob:http://localhost/xxx的地址 - 立即赋给
img.src即可显示，无需等待读取完成 - 记得在不需要时调用
URL.revokeObjectURL(url)释放内存（比如更换图片前）
构造 FormData 并上传到服务器
预览只是前端操作，真正上传需把文件塞进 FormData，再用 fetch 发送：
立即学习“Java免费学习笔记（深入）”；
- 创建
const formData = new FormData() - 调用
formData.append('file', file)（键名按后端要求填写，如avatar） - 发起请求：
fetch('/upload', { method: 'POST', body: formData }) - 注意：不要设置
Content-Type头，让浏览器自动设置带 boundary 的 multipart/form-data
完整示例（含错误处理）
HTML 中放一个文件输入框和一个图片容器：
@@##@@
JS 部分：
const input = document.getElementById('fileInput');
const img = document.getElementById('preview');
input.addEventListener('change', function (e) {
const file = e.target.files[0];
if (!file || !file.type.startsWith('image/')) return;
// 清除旧预览 URL
if (img.src) URL.revokeObjectURL(img.src);
// 创建新 URL 并预览
img.src = URL.createObjectURL(file);
// 可选：自动上传
const formData = new FormData();
formData.append('file', file);
fetch('/api/upload', { method: 'POST', body: formData })
.then(res => res.json())
.then(data => console.log('上传成功', data))
.catch(err => console.error('上传失败', err));
});
