// HTML结构
/*
<input type="file" id="fileInput">
<button οnclick="uploadFile()">上传文件</button>
<div id="progressBarContainer" style="display:none;">
<div id="progressBar"></div>
<div id="progressStatus"></div>
</div>
*/
// JavaScript代码
function uploadFile() {
const fileInput = document.getElementById('fileInput');
const progressBar = document.getElementById('progressBar');
const progressStatus = document.getElementById('progressStatus');
const progressBarContainer = document.getElementById('progressBarContainer');
const file = fileInput.files[0];
if (!file) {
alert('请选择一个文件进行上传!');
return;
}
const xhr = new XMLHttpRequest();
const url = 'https://example.com/upload'; // 替换为实际的上传接口地址
xhr.open('POST', url, true);
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
progressBar.style.width = percentComplete + '%';
progressStatus.innerText = '已上传 ' + percentComplete.toFixed(2) + '%';
}
};
xhr.onload = function() {
if (xhr.status === 200) {
alert('文件上传成功!');
progressBar.style.width = '0%';
progressStatus.innerText = '';
progressBarContainer.style.display = 'none';
} else {
alert('文件上传失败,请重试!');
}
};
xhr.onerror = function() {
alert('网络错误,文件上传失败!');
};
const formData = new FormData();
formData.append('file', file);
xhr.send(formData);
progressBarContainer.style.display = 'block';
}
- 文件选择与上传:通过HTML
<input type="file">
元素让用户选择要上传的文件,并通过JavaScript处理选定的文件。 - 异步上传:使用XMLHttpRequest对象进行文件的异步上传,实现了前端向服务器发送文件数据的功能。
- 上传进度条显示:利用
xhr.upload.onprogress
事件监听上传进度,动态更新页面上的进度条和上传进度文字提示。 - 上传完成处理:在文件上传成功或失败时,显示相应的提示信息,帮助用户了解上传状态。