如何用JavaScript实现一个文件上传组件_如何显示进度和处理错误？

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> 或自定义 p）

用 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免费学习笔记（深入）”；

标签： javascript java js 前端 json app 字节 跨域 状态码