HTML表单控件上传进度显示的实现-html教程-PHP中文网

input[type="file"]本身不触发进度事件，因为它仅负责文件选择而不参与上传；进度监听必须绑定在xmlhttprequest.upload对象上，fetch目前不支持上传进度回调，且需确保服务端正确响应。

html表单控件上传进度显示的实现

为什么 `input[type="file"]` 本身不触发进度事件

因为原生文件选择控件只负责选文件，不参与上传过程。进度反馈必须绑定在后续的 XMLHttpRequest 或 fetch 请求上，而不是 input 元素本身。常见错误是给 input 绑定 progress 事件——它根本不会触发。

真正能监听上传进度的，只有发起网络请求的对象，且仅限于 XMLHttpRequest（fetch 目前仍不支持上传进度回调）。

必须用 XMLHttpRequest.upload 对象监听 progress、load、error 等事件
FormData 是必备中间层：把 input.files[0] append 进去再发送
服务端必须正常接收并返回响应，否则前端会卡在 uploading 状态或触发 error

如何用 `XMLHttpRequest` 正确监听上传进度

关键不是“怎么显示”，而是“在哪绑、绑谁、怎么算百分比”。下面是最小可靠写法：

const input = document.querySelector('input[type="file"]');
const xhr = new XMLHttpRequest();
<p>input.addEventListener('change', () => {
const file = input.files[0];
if (!file) return;</p><p>xhr.upload.addEventListener('progress', (e) => {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
console.log(<code>上传中: ${percent}%</code>);
// 更新你的进度条 DOM，例如：progressBar.style.width = <code>${percent}%</code>;
}
});</p><p>xhr.addEventListener('load', () => {
console.log('上传完成');
});</p><p>xhr.addEventListener('error', () => {
console.error('上传失败');
});</p><p>xhr.open('POST', '/upload');
xhr.send(new FormData());
});</p>

e.lengthComputable 必须判断，某些服务器未返回 Content-Length 时 e.total 为 0，直接除会导致 NaN
FormData 构造时要传入 file： const fd = new FormData(); fd.append('file', file);
不要在 change 回调里重复创建 xhr 实例却不 abort——多次选文件会堆积未完成请求