JavaScript 文件上传预览核心是用 File API 读取文件，URL.createObjectURL() 生成临时 URL 渲染图片；上传则通过 FormData 和 fetch 发送至服务器，并注意内存释放与错误处理。
JavaScript 实现文件上传并预览图片，核心是利用 File API 读取本地文件，再通过 URL.createObjectURL() 创建临时 URL 渲染到 <img> 标签上。整个过程无需后端即可完成前端预览，上传则需配合 FormData 和 fetch（或 XMLHttpRequest）发送到服务器。
监听文件选择并读取图片
用户通过 <input type="file"> 选择文件后，可以从 event.target.files 获取 File 对象列表。只需取第一个（或遍历），用 FileReader 读取为 data URL：
- 确保
accept="image/*"限制只选图片（可选但推荐） - 检查
files.length > 0，避免空选择 - 使用
reader.readAsDataURL(file)将图片转为 base64 URL - 在
reader.onload回调中获取reader.result并赋值给<img src>
快速预览：用 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 中放一个文件输入框和一个图片容器：
<input type="file" id="fileInput" accept="image/*"><br><img id="preview" alt="预览区域" style="max-width: 300px; margin-top: 10px;">
JS 部分：
const input = document.getElementById('fileInput');<br>const img = document.getElementById('preview');<br><br>input.addEventListener('change', function (e) {<br> const file = e.target.files[0];<br> if (!file || !file.type.startsWith('image/')) return;<br><br> // 清除旧预览 URL<br> if (img.src) URL.revokeObjectURL(img.src);<br><br> // 创建新 URL 并预览<br> img.src = URL.createObjectURL(file);<br><br> // 可选：自动上传<br> const formData = new FormData();<br> formData.append('file', file);<br> fetch('/api/upload', { method: 'POST', body: formData })<br> .then(res => res.json())<br> .then(data => console.log('上传成功', data))<br> .catch(err => console.error('上传失败', err));<br>});
