js实现上传进度条
实现上传进度条的方法
在JavaScript中，可以通过监听XMLHttpRequest或Fetch API的上传事件来实现上传进度条。以下是两种常见的方法：
使用XMLHttpRequest实现上传进度条
XMLHttpRequest提供了upload属性，可以监听上传进度事件。
const xhr = new XMLHttpRequest();
const fileInput = document.getElementById('fileInput');
const progressBar = document.getElementById('progressBar');
xhr.upload.addEventListener('progress', (event) => {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
progressBar.style.width = percentComplete + '%';
progressBar.textContent = Math.round(percentComplete) + '%';
}
});
xhr.addEventListener('load', () => {
console.log('上传完成');
});
xhr.addEventListener('error', () => {
console.error('上传失败');
});
xhr.open('POST', '/upload', true);
const formData = new FormData();
formData.append('file', fileInput.files[0]);
xhr.send(formData);使用Fetch API实现上传进度条
Fetch API本身不直接支持进度事件，但可以通过结合ReadableStream和TransformStream实现。
const fileInput = document.getElementById('fileInput');
const progressBar = document.getElementById('progressBar');
const file = fileInput.files[0];
const reader = file.stream().getReader();
let uploaded = 0;
const stream = new ReadableStream({
async start(controller) {
while (true) {
const { done, value } = await reader.read();
if (done) {
controller.close();
break;
}
uploaded += value.length;
const percentComplete = (uploaded / file.size) * 100;
progressBar.style.width = percentComplete + '%';
progressBar.textContent = Math.round(percentComplete) + '%';
controller.enqueue(value);
}
}
});
fetch('/upload', {
method: 'POST',
headers: {
'Content-Type': 'application/octet-stream',
},
body: stream,
}).then(response => {
console.log('上传完成');
}).catch(error => {
console.error('上传失败', error);
});使用第三方库实现上传进度条
如果需要更简单的实现，可以考虑使用第三方库如axios或jQuery。
使用axios实现上传进度条
const fileInput = document.getElementById('fileInput');
const progressBar = document.getElementById('progressBar');
const formData = new FormData();
formData.append('file', fileInput.files[0]);
axios.post('/upload', formData, {
onUploadProgress: (progressEvent) => {
const percentComplete = (progressEvent.loaded / progressEvent.total) * 100;
progressBar.style.width = percentComplete + '%';
progressBar.textContent = Math.round(percentComplete) + '%';
}
}).then(response => {
console.log('上传完成');
}).catch(error => {
console.error('上传失败', error);
});注意事项
- 确保服务器支持接收上传的文件，并正确处理进度事件。
- 对于大文件上传，建议分片上传以减少失败的风险。
- 进度条的样式可以根据需求自定义，例如使用CSS动画增强用户体验。
以上方法可以根据项目需求选择适合的实现方式。XMLHttpRequest兼容性较好，Fetch API更适合现代浏览器，第三方库则提供了更简洁的API。
