监听input file的change事件获取FileList，用FormData构建数据体并用XMLHttpRequest上传，注意校验空文件、类型限制、进度监听及响应解析。
用
核心是监听 change 事件，从 event.target.files 中读取 FileList 对象。它不是数组，但可以用 [...files] 展开或用索引访问（比如 files[0]）。
注意：直接读取 files 是同步的，不涉及异步加载——这只是浏览器提供的本地引用，还没上传。
-
multiple属性允许选多个文件： -
accept可限制类型（如accept="image/*,.pdf"），但只是提示，不能替代服务端校验 -
files.length === 0表示用户取消选择，需主动判断，否则容易误触发上传逻辑
用 FormData 构建上传数据体
这是最常用、兼容性好、支持二进制和字段混合提交的方式。不要手动拼 JSON.stringify() 或设置 Content-Type: application/json——那样传不了文件。
const formData = new FormData();
formData.append('file', file); // 单个文件
formData.append('description', '用户上传的截图'); // 额外字段
formData.append('category', 'report');如果传多个文件，可循环追加，name 保持一致（后端按同名字段接收数组）：
立即学习“Java免费学习笔记（深入）”；
for (const file of files) {
formData.append('files', file); // 注意 name 是 'files'，不是 'file[]'
}- 不用手动设
Content-Type头——fetch或XMLHttpRequest发送FormData时会自动设置为multipart/form-data并带上正确 boundary - 避免对
FormData再 JSON 序列化，否则会报错或传空 - 某些旧版 Safari 对大文件 append 有性能问题，可考虑分片前先做大小检查
用 fetch 发起上传并监听进度
fetch 本身不支持上传进度，得靠 XMLHttpRequest 的 upload.onprogress，或者用 ReadableStream + TransformStream（现代方案，但兼容性有限）。多数场景下，用 XMLHttpRequest 更稳妥。
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log(`上传中：${percent.toFixed(1)}%`);
}
};
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
console.log('上传成功', JSON.parse(xhr.responseText));
}
};
xhr.open('POST', '/api/upload');
xhr.send(formData);-
xhr.upload是上传专用对象，xhr.onprogress是下载进度，别混淆 - 服务端返回非 2xx 状态码时，
xhr.status仍可读，但xhr.onerror不一定触发（比如 400、500 属于“成功收到响应”，走onload） - 若需 Abort，用
xhr.abort()；fetch则需AbortController，但无法获知上传进度
处理常见错误和边界情况
用户选了文件不等于能上传成功。以下问题必须在前端拦截或提示：
-
file.size === 0：空文件，可能是误点或生成失败，建议直接拒绝 -
file.type为空字符串：部分本地文件（如桌面拖入的无扩展名文件）可能无 MIME 类型，不能只依赖它校验格式 - 超大文件未分片：直接传几百 MB 易被浏览器中断或服务端拒绝，应提前
if (file.size > 50 * 1024 * 1024)提示分卷上传 - 重复上传同一文件：可用
file.name + file.size + file.lastModified做简易指纹，避免误操作重发 - 移动端
capture拍照后可能旋转异常：这不是上传问题，但常被一起遇到——需用EXIF.js或canvas旋转修复，不在上传流程内处理
真正上传失败的原因往往藏在响应体里，比如后端返回 {"code":401,"msg":"token expired"}，前端要解析 responseText 而不只是看状态码。
