哈尔滨阿里云代理商：ajax实现进度条

luotuoemo • 2023年12月29日 01:20 • 阿里云 • 阅读 290

实现进度条一般使用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());

说明：