File API仅用于浏览器端读取本地文件，不上传；上传需用fetch或XMLHttpRequest，推荐FormData+fetch方式，避免base64转换；大文件宜用readAsArrayBuffer()或流式处理；进度监听需用XMLHttpRequest；前端校验仅为辅助，须结合size、type与扩展名。
File API 读取本地文件内容（非上传）
File API 本身不上传文件，只负责在浏览器端读取、校验、预览用户选中的文件。真正上传得靠 fetch 或 XMLHttpRequest 发送二进制数据。
常见错误是以为 File 对象能直接“上传”，其实它只是 Blob 的子类，没有网络能力。你得先用 FileReader 读取内容，或直接把 File 当作 FormData 的值传给请求。
-
input[type="file"]的files属性返回FileList，每个项是File实例 -
File继承自Blob，所以可直接用于URL.createObjectURL()预览图片 - 读取大文件时别用
readAsText()，优先用readAsArrayBuffer()或流式处理（stream()+ReadableStream）
用 FormData + fetch 上传文件（推荐方式）
这是目前最简洁、兼容性好（Chrome 42+、Firefox 39+）、支持多文件和字段混合提交的方式。
关键点：不要手动调用 FileReader 再转成 base64——既浪费内存又拖慢速度，FormData 能直接接受 File 对象并自动设置 Content-Type。
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
const files = Array.from(e.target.files);
const formData = new FormData();
files.forEach(file => {
formData.append('files', file); // 后端接收字段名是 'files'
});
try {
const res = await fetch('/api/upload', {
method: 'POST',
body: formData,
// ⚠️ 不要设 'Content-Type'！让浏览器自动设置 boundary
});
console.log(await res.json());
} catch (err) {
console.error('上传失败:', err);
}
});
监听上传进度（XMLHttpRequest 更可控）
fetch 没有原生上传进度事件，必须切回 XMLHttpRequest。虽然略重，但对大文件或需实时反馈的场景不可替代。
注
open() 之后、send() 之前；且只能监听 upload 对象，不是 xhr 本身。
-
xhr.upload.onprogress的event.loaded和event.total是字节数，不是百分比 - 如果后端用了 Nginx 等代理，可能截断
Content-Length，导致event.total === 0，此时只能显示“上传中”而非百分比 - 移动端 Safari 对
upload.onprogress支持稳定，但部分安卓 WebView 有延迟
文件校验与限制（前端只是辅助）
前端校验不能替代后端检查，但能立刻反馈、减少无效请求。重点防的是误操作，不是绕过攻击。
常用判断逻辑应组合使用，比如：file.size + file.type + 文件扩展名（file.name.split('.').pop()），因为 type 可被伪造，扩展名也可能错。
- 图片 MIME 类型建议用
file.type.startsWith('image/') || ['jpg','jpeg','png','gif'].includes(ext) - 限制单个文件大小：检查
file.size > 5 * 1024 * 1024（5MB），超过就e.target.value = ''清空 input - 多文件上传时，
input.multiple属性开启后，e.target.files才会是多个，否则只取第一个
文件上传真正的复杂点不在 API 调用，而在错误边界：网络中断、后端拒绝、超时、分片失败、断点续传、取消上传时的资源清理。这些没法靠 File API 解决，得靠状态管理 + 重试策略 + 后端配合。
