原生JS上传文件需用FormData配合XMLHttpRequest并监听upload.onprogress获取进度；本地预览媒体文件用URL.createObjectURL；文本或元数据处理用FileReader；服务端CORS、multipart解析及Nginx配置是常见失败原因。
用 XMLHttpRequest 或 fetch 上传文件并监听进度
原生 JS 上传文件的核心是把 File 对象塞进 FormData，再通过 XMLHttpRequest 发送——fetch 本身不支持上传进度，所以必须用 XMLHttpRequest 的 upload.onprogress。
-
XMLHttpRequest.upload.onprogress只在上传阶段触发，能拿到event.loaded和event.total - 注意：如果后端返回大响应体，
XMLHttpRequest.onprogress（非 upload）可能误判为“下载进度”，别混用 - 上传前建议校验
file.size，避免用户选中几十 GB 文件卡死 UI
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log(`上传中: ${percent.toFixed(1)}%`);
}
};
xhr.open('POST', '/upload');
xhr.send(new FormData(document.querySelector('#uploadForm')));用 URL.createObjectURL 实现图片/视频本地预览
不需要发请求就能渲染用户选中的媒体文件，关键就是 URL.createObjectURL(file) 返回一个临时 blob URL。
- 只对
image/*、video/*、audio/*类型有效；文本类文件得读取内容再展示 - 必须在不用时调用
URL.revokeObjectURL(url)，否则内存泄漏（尤其反复选图） - 预览前建议检查
file.type.match(/^image\/|^video\/|^audio\//)，避免src赋值失败静默失败
document.querySelector('input[type="file"]').addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;
img.onload = () => URL.revokeObjectURL(url); // 清理
});用 FileReader 预览文本或获取缩略图元数据
当需要读取文件内容（比如 CSV 预览）、或提取图片 EXIF 信息、或生成 Canvas 缩略图时，FileReader 是唯一选择。
-
readAsDataURL适合小文件（readAsArrayBuffer 更底层，适合后续解析二进制 - 读取失败时
FileReader.error是DOMException，不是字符串，别直接console.log(e.error) - 多个文件需为每个创建独立
FileReader实例，复用会出错
const reader = new FileReader();
reader.onload = (e) => {
const text = e.target.result; // 纯文本内容
document.querySelector('#textPreview').textContent = text.substring(0, 200) + '...';
};
reader.readAsText(file); // 注意：仅对文本类 MIME 有效常见坑：跨域、MIME 类型伪造、服务端接收逻辑不匹配
前端上传代码跑通不代表真能传成功——90% 的问题出在服务端没正确解析 multipart/form-data 或没配 CORS。
立即学习“Java免费学习笔记（深入）”；
-
浏览器控制台若报
Failed to fetch且无具体错误，先看 Network → Headers → Request Method 是否为OPTIONS，大概率是预检失败 - 服务端收到的文件名可能是空或乱码，因为
FormData.append('file', file)不带 filename 字段，需显式写成FormData.append('file', file, file.name) - 某些 Nginx 配置会拦截大文件上传，报
413 Request Entity Too Large，不只是前端限制了file.size
进度和预览功能本身很稳定，真正卡住的地方永远在前后端约定是否对齐——比如前端传 file 字段，后端却去读 files；或者前端设了 enctype="multipart/form-data"，但表单提交用了 fetch 却忘了用 FormData。
