JavaScript 文件上传组件需用 XMLHttpRequest 监听 upload.onprogress 获取进度，FormData 封装文件，统一处理 onload（200–299 成功）、onerror（网络异常）和 ontimeout（超时），确保上传过程透明可控。
用 JavaScript 实现一个带进度显示和错误处理的文件上传组件，核心在于利用 XMLHttpRequest 或 fetch + FormData，并监听上传过程中的事件。关键不是“能不能传”，而是“传得明白、出错可知、体验可控”。
用 XMLHttpRequest 监听上传进度
XMLHttpRequest 提供了 upload.onprogress 事件，能实时获取已上传 字节 数和总大小，适合做进度条。
- 创建
new XMLHttpRequest()，调用open('POST', url) - 绑定
xhr.upload.onprogress = e => {if (e.lengthComputable) {……} }，其中e.loaded是已传字节数，e.total是文件总大小 - 用
Math.round((e.loaded / e.total) * 100)算百分比，更新 UI（比如<progress></progress>或自定义 div）
用 FormData 构建上传数据
前端 选中文件后，用 FormData 包裹，可自动设置 Content-Type: multipart/form-data，服务端也容易解析。
- 从
<input type="file">的files[0]获取文件对象 -
const fd = new FormData(); fd.append('file', file);（字段名需和服务端约定一致） - 可额外加其他字段：
fd.append('name', 'xxx');
统一处理成功、失败与网络异常
上传结果不能只靠 onload 判断，要覆盖常见错误路径：
立即学习“Java 免费学习笔记（深入）”；
-
xhr.onload：状态码 为 200–299 视为成功；否则进错误分支 -
xhr.onerror：网络中断、跨域 失败、请求被阻止等 -
xhr.ontimeout：手动设xhr.timeout = 30000，超时后触发 - 服务端返回非 2xx 但有 JSON 错误信息？用
JSON.parse(xhr.responseText)提取提示（注意 try-catch）
简单封装成可复用函数（示例）
把逻辑收拢，对外暴露清晰接口：
function uploadFile(file, url, onProgress, onSuccess, onError) {const xhr = new XMLHttpRequest(); const fd = new FormData(); fd.append('file', file); <p>xhr.upload.onprogress = e => {if (e.lengthComputable) {const percent = Math.round((e.loaded / e.total) * 100); onProgress?.(percent); } };</p><p>xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) {onSuccess?.(JSON.parse(xhr.responseText)); } else {onError?.(new Error(<code>HTTP ${xhr.status}: ${xhr.statusText}</code>)); } };</p><p>xhr.onerror = () => onError?.(new Error('Network error')); xhr.ontimeout = () => onError?.(new Error('Request timeout')); xhr.timeout = 30000;</p><p>xhr.open('POST', url); xhr.send(fd); }调用时只需传入文件、地址和三个回调，进度、成功、错误各司其职，不耦合 UI。
基本上就这些。不需要第三方库，原生能力足够稳；重点是别漏掉 onerror/ontimeout，不然用户卡在“转圈”却不知为何失败。
