实现进度条一般使用ajax技术，具体步骤如下：
- 引入jquery库
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>- 编写css样式代码
#progress{
width: 300px;
height: 10px;
background-color: #ccc;
position: relative;
}
.bar{
width: 0%;
height: 100%;
background-color: #4caf50;;
position: absolute;
left: 0;
top: 0;
transition: width 0.3s ease-out;
}- 编写html页面代码
<div id="progress">
<div class="bar"></div>
</div>- 编写ajax请求代码
// 定义变量
var xhr = new XMLHttpRequest();
var url = "your_api_url"; //需要请求的接口地址
var progress = $("#progress .bar");
// 监听状态
xhr.onprogress = function(event) {
if (event.lengthComputable) {
var percent = (event.loaded / event.total) * 100 + "%";
progress.width(percent); //根据返回的进度信息更新进度条进度
progress.text(percent); //显示进度
}
};
// 发送请求
xhr.open("GET", url, true);
xhr.send();通过监听xhr对象的onprogress事件，可以获取ajax请求的进度信息，并实时更新进度条的进度。其中，event.loaded属性表示已经加载的字节数，event.total属性表示需要加载的总字节数。根据这两个参数可以计算出当前加载的百分比，从而动态更新进度条的进度。
- HTML代码：
<div id="progressBar"></div>- CSS代码：
#progressBar {
width: 300px;
height: 20px;
border: 1px solid #ccc;
position: relative;
margin: 20px;
}
#progressBar .bar {
width: 0;
height: 100%;
background: #07c;
position: absolute;
top: 0;
left: 0;
}- JavaScript代码：
var ajax = new XMLHttpRequest(),
progressBar = document.getElementById("progressBar"),
bar = progressBar.querySelector(".bar");
// 监听进度事件
ajax.upload.addEventListener("progress", function(e) {
var width = Math.round((e.loaded / e.total) * 100);
bar.style.width = width + "%";
}, false);
// 发送请求
ajax.open("POST", "upload.php");
ajax.send(new FormData());说明：
- 通过
document.getElementById("progressBar")获取进度条元素节点； - 通过
progressBar.querySelector(".bar")获取进度条进度元素节点； - 监听XMLHttpRequest对象的
upload的progress事件，获取上传进度； - 在事件回调函数中计算宽度百分比，设置进度条进度元素节点的宽度；
- 使用
ajax.open()和ajax.send()方法发送Ajax请求； - 服务器端代码省略。
发布者：luotuoemo，转转请注明出处：https://www.jintuiyun.com/116103.html
