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 发送：

• 创建 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));
});