JS上传文件时，显示网速及上传进度

admin · 发表于 2024-9-13 11:52:27

JS上传文件时，显示网速及上传进度
在 JavaScript 中，可以使用 `XMLHttpRequest` 对象来上传文件，并通过 `onprogress` 事件来显示上传进度和网速。下面是一个示例，展示如何实现这一功能：

html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传</title>
</head>
<body>
<input type="file" id="fileInput" />
<button id="uploadButton">上传文件</button>
<div>
<progress id="progressBar" value="0" max="100"></progress>
<span id="progressText">0%</span>
<span id="speedText"></span>
</div>
<script>
const fileInput = document.getElementById('fileInput');
const uploadButton = document.getElementById('uploadButton');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
const speedText = document.getElementById('speedText');
uploadButton.addEventListener('click', function() {
const file = fileInput.files[0]; // 获取选择的文件
if (!file) {
alert('请先选择一个文件');
return;
}
const xhr = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象
xhr.open('POST', '/upload', true); // 设置请求方法和目标 URL
// 监听上传进度事件
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
progressBar.value = percentComplete; // 更新进度条
progressText.textContent = Math.round(percentComplete) + '%'; // 更新进度文本
// 计算网速
const speed = event.loaded / (event.timeStamp / 1000); // 字节/秒
speedText.textContent = ' 网速: ' + (speed / (1024 * 1024)).toFixed(2) + ' MB/s'; // 转换为 MB/s
}
};
// 监听上传完成事件
xhr.onload = function() {
if (xhr.status === 200) {
alert('文件上传成功');
} else {
alert('文件上传失败: ' + xhr.statusText);
}
};
// 创建 FormData 对象并将文件添加到其中
const formData = new FormData();
formData.append('file', file);
// 发送请求
xhr.send(formData);
});
</script>
</body>
</html>

复制代码

### 代码说明：
1. **HTML 部分**：
- 创建文件输入框和上传按钮。
- 使用  `<progress>`  元素显示上传进度，并使用  `<span>`  元素显示进度百分比和网速。
2. **JavaScript 部分**：
- 获取文件输入框和上传按钮的 DOM 元素。
- 为上传按钮添加点击事件监听器，获取用户选择的文件。
- 创建  `XMLHttpRequest`  对象并设置请求。
- 监听  `xhr.upload.onprogress`  事件以更新进度条和显示上传百分比。
- 计算网速并更新显示。网速是通过已上传字节数除以时间戳计算得出的。
- 监听  `xhr.onload`  事件以处理上传完成后的响应。
- 创建  `FormData`  对象并将文件添加到其中，然后发送请求。
### 总结
通过以上代码，你可以实现文件上传时显示上传进度和网速的功能。

		自动登录	找回密码
密码			立即注册

JS上传文件时，显示网速及上传进度

相关帖子