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（比如或自定义 div）
用 FormData 构建上传数据
前端选中文件后，用 FormData 包裹，可自动设置 Content-Type: multipart/form-data，服务端也容易解析。
- 从
的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);
xhr.upload.onprogress = e => {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
onProgress?.(percent);
}
};
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
onSuccess?.(JSON.parse(xhr.responseText));
} else {
onError?.(new Error(HTTP ${xhr.status}: ${xhr.statusText}));
}
};
xhr.onerror = () => onError?.(new Error('Network error'));
xhr.ontimeout = () => onError?.(new Error('Request timeout'));
xhr.timeout = 30000;
xhr.open('POST', url);
xhr.send(fd);
}
调用时只需传入文件、地址和三个回调，进度、成功、错误各司其职，不耦合 UI。
基本上就这些。不需要第三方库，原生能力足够稳；重点是别漏掉 onerror/ontimeout，不然用户卡在“转圈”却不知为何失败。
