HTML文件上传时怎么显示已上传百分比-html教程-PHP中文网

必须用xmlhttprequest.upload.onprogress驱动progress标签，因fetch和表单submit均不支持上传进度；e.lengthcomputable为false时无法计算百分比，主因是服务端未返回content-length或cors未暴露该头。

html文件上传时怎么显示已上传百分比

progress 标签本身不自动获取进度，必须靠 JavaScript 驱动 —— 用 XMLHttpRequest.upload.onprogress 拿到实时字节数，再算百分比填进去。Fetch 不行，表单 submit 也不行，这是唯一可靠路径。

为什么 `upload.onprogress` 有时返回 `0%` 或 `unable to compute`

核心原因是 event.lengthComputable === false，常见于以下几种情况：

服务端没返回 Content-Length 响应头（比如 Node.js 的 Express 默认不设，需手动加 res.set('Content-Length', fileSize)）
用了 CORS 且未配置 Access-Control-Expose-Headers: Content-Length
上传时启用了 withCredentials: true，但服务端未在预检响应中暴露长度头
后端用了流式处理（如直接 pipe 到 S3），根本没提前知道总大小

此时只能显示“正在上传…”或用骨架动画，硬算 e.loaded / e.total * 100 会得 NaN 或 0。

`FormData` + `XMLHttpRequest` 的最小可行写法

别绕开 XMLHttpRequest 去套 Fetch 或 jQuery.ajax —— 后者封装层可能吞掉 upload 对象。下面是最简可运行结构：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

const input = document.getElementById('fileInput');
const progress = document.getElementById('uploadProgress');
<p>input.addEventListener('change', () => {
const file = input.files[0];
if (!file) return;</p><p>const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
progress.value = percent;
progress.textContent = <code>${percent}%</code>;
}
};</p><p>xhr.onload = () => console.log('done');
xhr.onerror = () => console.error('fail');</p><p>const fd = new FormData();
fd.append('file', file);</p><p>xhr.open('POST', '/upload');
xhr.send(fd);
});
</p>

注意点：

progress 元素的 max 属性默认是 100，所以直接赋 percent 就行；若设成字节数，就得同步改 max
fd.append() 的第二个参数必须是 File 对象，不是 files[0].name 或字符串
不要在 onprogress 里频繁操作 DOM，建议加节流：用 requestAnimationFrame 或简单地 if (Date.now() - lastUpdate > 200)