如何实现javascript文件上传_有哪些进度与预览功能？

原生JS上传文件需用FormData配合XMLHttpRequest并监听upload.onprogress获取进度；本地预览媒体文件用URL.createObjectURL；文本或元数据处理用FileReader；服务端CORS、multipart解析及Nginx配置是常见失败原因。

用 XMLHttpRequest 或 fetch 上传文件并监听进度

原生 JS 上传文件的核心是把 File 对象塞进 FormData，再通过 XMLHttpRequest 发送——fetch 本身不支持上传进度，所以必须用 XMLHttpRequest 的 upload.onprogress。

• XMLHttpRequest.upload.onprogress 只在上传阶段触发，能拿到 event.loaded 和 event.total
• 注意：如果后端返回大响应体，XMLHttpRequest.onprogress（非 upload）可能误判为“下载进度”，别混用
• 上传前建议校验 file.size，避免用户选中几十 GB 文件卡死 UI

const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
  if (e.lengthComputable) {
    const percent = (e.loaded / e.total) * 100;
    console.log(`上传中: ${percent.toFixed(1)}%`);
  }
};
xhr.open('POST', '/upload');
xhr.send(new FormData(document.querySelector('#uploadForm')));

用 URL.createObjectURL 实现图片/视频本地预览

不需要发请求就能渲染用户选中的媒体文件，关键就是 URL.createObjectURL(file) 返回一个临时 blob URL。

• 只对 image/*、video/*、audio/* 类型有效；文本类文件得读取内容再展示
• 必须在不用时调用 URL.revokeObjectURL(url)，否则内存泄漏（尤其反复选图）
• 预览前建议检查 file.type.match(/^image\/|^video\/|^audio\//)，避免 src 赋值失败静默失败

document.querySelector('input[type="file"]').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
  const url = URL.createObjectURL(file);
  const img = document.querySelector('#preview');
  img.src = url;
  img.onload = () => URL.revokeObjectURL(url); // 清理
});

用 FileReader 预览文本或获取缩略图元数据

当需要读取文件内容（比如 CSV 预览）、或提取图片 EXIF 信息、或生成 Canvas 缩略图时，FileReader 是唯一选择。

• readAsDataURL 适合小文件（readAsArrayBuffer 更底层，适合后续解析二进制
• 读取失败时 FileReader.error 是 DOMException，不是字符串，别直接 console.log(e.error)
• 多个文件需为每个创建独立 FileReader 实例，复用会出错

const reader = new FileReader();
reader.onload = (e) => {
  const text = e.target.result; // 纯文本内容
  document.querySelector('#textPreview').textContent = text.substring(0, 200) + '...';
};
reader.readAsText(file); // 注意：仅对文本类 MIME 有效

常见坑：跨域、MIME 类型伪造、服务端接收逻辑不匹配

前端上传代码跑通不代表真能传成功——90% 的问题出在服务端没正确解析 multipart/form-data 或没配 CORS。

• 浏览器控制台若报 Failed to fetch 且无具体错误，先看 Network → Headers → Request Method 是否为 OPTIONS，大概率是预检失败
• 服务端收到的文件名可能是空或乱码，因为 FormData.append('file', file) 不带 filename 字段，需显式写成 FormData.append('file', file, file.name)
• 某些 Nginx 配置会拦截大文件上传，报 413 Request Entity Too Large，不只是前端限制了 file.size

进度和预览功能本身很稳定，真正卡住的地方永远在前后端约定是否对齐——比如前端传 file 字段，后端却去读 files；或者前端设了 enctype="multipart/form-data"，但表单提交用了 fetch 却忘了用 FormData。