用 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 事件：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
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 捕获异常：
立即学习“Java免费学习笔记（深入）”；
-
xhr.status === 200表示成功，可解析xhr.response（JSON 或文本） - 上传失败时，
xhr.status可能为 0（网络断开）或 4xx/5xx 状态码 - 建议设置超时：
xhr.timeout = 60000;，并监听ontimeout
简单进度条 UI 示例
用一个 <progress> 元素或自定义 div 更新宽度即可：
<progress id="uploadProgress" value="0" max="100"></progress>- 在
onprogress里写：document.getElementById('uploadProgress').value = Math.round(percent); - 上传完成或出错后重置进度条，避免残留
