用 formdata 配合 xmlhttprequest 可实现带进度条的文件上传，核心是监听 xhr.upload.onprogress 事件并封装文件及字段；fetch 不支持上传进度监听，需用 xmlhttprequest；上传完成通过 onload 处理响应，onerror/ontimeout 捕获错误，并建议设置 timeout。
用 FormData 配合 XMLHttpRequest（或 fetch）可以实现带进度条的文件上传，核心在于监听上传过程中的 progress 事件，并把文件和其它字段统一打包进 FormData。
创建 FormData 并添加文件与字段
先获取 <input type="file"> 的文件对象，再用 FormData.append() 添加文件和其他参数（如用户名、描述等），注意文件字段名要和服务端约定一致：
- 支持多文件：遍历
input.files数组，逐个append - 可额外加文本字段：
formData.append('username', 'Alice') - 不需手动设置
Content-Type，浏览器会自动设为multipart/form-data并带上正确 boundary
用 XMLHttpRequest 监听上传进度
fetch 本身不支持上传进度监听，所以必须用 XMLHttpRequest。关键是在 xhr.upload 上绑定 progress 事件：
xhr.upload.onprogress = e => { if (e.lengthComputable) { const percent = (e.loaded / e.total) * 100; updateProgress(percent); } }-
e.loaded是已上传字节数，e.total是总大小（仅当服务端返回Content-Length或浏览器能预估时才可用） - 确保在
xhr.open()之后、xhr.send()之前绑定事件
处理响应与错误
上传完成后，通过 xhr.onload 获取成功响应，用 xhr.onerror 和 xhr.ontimeout 捕获异常：
-
xhr.status === 200表示成功，可解析xhr.response（JSON 或文本） - 上传失败时，
xhr.status可能为 0（网络断开）或 4xx/5xx 状态码 - 建议设置超时：
xhr.timeout = 60000;，并监听ontimeout
简单进度条 UI 示例
用一个 <progress></progress> 元素或自定义 div 更新宽度即可：
<progress id="uploadProgress" value="0" max="100"></progress>- 在
onprogress里写：document.getElementById('uploadProgress').value = Math.round(percent); - 上传完成或出错后重置进度条，避免残留
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
