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，不然用户卡在“转圈”却不知为何失败。
以上就是如何用JavaScript实现一个文件上传组件_如何显示进度和处理错误？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542874.html
微信扫一扫 
支付宝扫一扫 
