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

实现进度条一般使用ajax技术,具体步骤如下:

  1. 引入jquery库
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  1. 编写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;
}
  1. 编写html页面代码
<div id="progress">
  <div class="bar"></div>
</div>
  1. 编写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属性表示需要加载的总字节数。根据这两个参数可以计算出当前加载的百分比,从而动态更新进度条的进度。

  1. HTML代码:
<div id="progressBar"></div>
  1. 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;
}
  1. 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对象的uploadprogress事件,获取上传进度;
  • 在事件回调函数中计算宽度百分比,设置进度条进度元素节点的宽度;
  • 使用ajax.open()ajax.send()方法发送Ajax请求;
  • 服务器端代码省略。

发布者:luotuoemo,转转请注明出处:https://www.jintuiyun.com/116103.html

(0)
luotuoemo的头像luotuoemo
上一篇 2023年12月29日 01:16
下一篇 2023年12月29日 01:46

相关推荐

  • 阿里云续费服务器怎么退款

    如需对阿里云服务器续费进行退款,您可以按照以下步骤进行操作: 登录阿里云官网,进入阿里云管理控制台。 在控制台页面上方导航栏中选择”费用”,然后选择”续费管理”。 在续费管理页面中,可以找到需要退款的服务器实例,选择该实例。 在实例详情页面中,选择”退款”选项,点击”申请退款…

    2023年9月10日
    16800
  • 射阳阿里云企业邮箱代理商:阿里云主邮箱怎么查看子邮箱

    射阳阿里云企业邮箱代理商:阿里云主邮箱怎么查看子邮箱 介绍 阿里云企业邮箱是一款专业的企业级邮箱服务,为企业提供安全、稳定、高效的邮件通信方案。而作为阿里云企业邮箱的代理商,射阳公司将为您介绍如何查看子邮箱。 步骤 登录阿里云企业邮箱管理控制台。 在管理控制台界面左侧导航栏中找到“邮箱管理”选项并点击。 点击“子邮箱”标签页。 您将看到列出了所有子邮箱的相关…

    2024年2月8日
    19800
  • 阿里云应用分发平台怎么样

    阿里云石家庄代理,阿里云cdn怎么样呢? 阿里云CDN采用流量包计费模式,对于新用户有100GB免费服务,但是需要抢资格。根据介绍,每天有一定的名额限制,原本准备抢一个体验的,一直没有申请到,以后如果有机会申请到再分享体验文章。(更新,刚才去阿里云官方看,已经取消免费活动,以后有活动再体验分享) 阿里云cdn怎么样呢?阿里云石家庄代理的, 思朴科技挺不错的,…

    2023年8月26日
    18600
  • 连云港阿里云代理商:android判断4g网络信号强度

    在Android中,可以通过使用TelephonyManager类的getNetworkOperatorStrength()方法来获取4G网络信号强度。 以下是一个示例代码: import android.content.Context; import android.telephony.TelephonyManager; public class Netw…

    2024年3月4日
    13900
  • 物联网设备接入阿里云

    宽带怎么接入阿里云虚拟主机 展开全部推荐你用:阿里云虚拟主机-普及版(1G网页空间,送50M SQL数据库,支持HTML/ASP/NET/PHP/MYSQL/MSSQL),能备案:150元/年。可以加咱,在线上。 物联网与云计算怎样结合? 这个不难理解,因为云计算是分布式计算技术的一种,物联网与云计算怎样结合,是透过网络将庞大的计算处理程序自动分拆成无数个较…

    2023年8月26日
    15900

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们

4000-747-360

在线咨询: QQ交谈

邮件:ixuntao@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
购买阿里云服务器请访问:https://www.4526.cn/