在前端开发中,使用JavaScript实现文件上传并显示进度条是一个常见的需求。这通常通过XMLHttpRequest
或现代的Fetch API
配合ReadableStream
来实现。以下是使用XMLHttpRequest
实现文件上传进度条的基本步骤:
XMLHttpRequest
在大多数浏览器中都有很好的支持。event.lengthComputable
为true
,否则无法计算进度。XMLHttpRequest
的旧浏览器,可以考虑使用Fetch API
配合ReadableStream
,但需要注意兼容性问题。虽然Fetch API
本身不直接支持进度事件,但可以通过ReadableStream
来实现进度条:
async function uploadFileWithFetch() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (!file) {
alert('Please select a file.');
return;
}
const url = '/upload';
const response = await fetch(url, {
method: 'POST',
body: file,
headers: {
'Content-Type': file.type
}
});
if (response.ok) {
alert('File uploaded successfully.');
} else {
alert('File upload failed.');
}
}
注意:Fetch API
实现进度条较为复杂,需要手动处理流数据,通常推荐使用XMLHttpRequest
来实现上传进度条。
领取专属 10元无门槛券
手把手带您无忧上云