javascript如何实现文件上传？进度监控怎样完成？

风之吻网站开发 2025-12-23 502

　　JavaScript 实现文件上传并监控进度，核心是使用 XMLHttpRequest（或 Fetch API 配合 ReadableStream）配合 progress 事件。现代浏览器中推荐用 XMLHttpRequest.upload.onprogress 获取上传进度，它能实时反馈已上传字节数。

javascript如何实现文件上传？进度监控怎样完成？-第1张图片-风享汇

　　使用 XMLHttpRequest 监控上传进度

　　这是最稳定、兼容性好且原生支持进度监听的方式：

　　创建 XMLHttpRequest 实例，调用 open('POST', url)

　　监听 xhr.upload.onprogress 事件，该事件对象含 loaded （已传字节数）和 total （总字节数）

　　计算进度百分比： Math.round((e.loaded / e.total) * 100)

　　注意：只有在发送 FormData （含文件）时， total 才有值；纯文本请求可能不触发 progress

　　用 Fetch + Upload Progress（需手动流式处理）

　　Fetch 本身不直接暴露上传进度，但可通过 ReadableStream + pipeTo 拦截上传数据流（仅 Chromium 120+ 和 Firefox 125+ 支持）：

　　将文件转为 ArrayBuffer 或使用 file.stream()

　　创建自定义 TransformStream ，在 transform() 中累加已读字节并派发自定义进度事件

　　将处理后的流传入 fetch(url, { method: 'POST', body: processedStream })

　　实际项目中更推荐回退到 XMLHttpRequest，除非明确需要 Fetch 的其他特性（如 AbortSignal 统一控制）

　　关键细节与常见问题

　　避免踩坑，要注意以下几点：

　　CORS 配置：服务端必须返回 Access-Control-Allow-Origin ，且若带 Cookie 还需设置 credentials: 'include'

　　大文件分片上传：单次上传受网络/超时限制，真实场景建议结合 MD5 校验、断点续传、分块并发（如每块 2MB）

　　多文件并发控制：避免同时上传过多文件拖垮浏览器，可用 PromisePool 限流（如最多 3 个并发）

　　移动端兼容性：iOS Safari 对 upload.onprogress 支持良好，但部分旧版本可能只在完成时触发一次，建议降级显示“上传中…”状态

　　一个最小可用示例（XMLHttpRequest）

　　HTML 中放一个 <input type="file"> 和进度条 <progress value="0" max="100"></progress> ：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
    const file = e.target.files[0];
    const xhr = new XMLHttpRequest(); < p > xhr.upload.onprogress = (e) => {
        if (e.lengthComputable) {
            const percent = Math.round((e.loaded / e.total) * 100);
            document.querySelector('progress').value = percent;
        }
    }; < /p><p>xhr.onload = () => {if (xhr.status === 200) console.log('上传成功');};</p > < p > xhr.open('POST', '/upload');
    xhr.send(new FormData());
});

　　不复杂但容易忽略的是：确保后端正确接收 multipart/form-data，并返回合适的状态码与响应头。前端进度只是“发出多少”，不代表服务端已写入磁盘——最终结果仍需靠 onload 或 onerror 确认。

标签： javascript