哈尔滨阿里云代理商: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

相关推荐

  • 阿里云短信签名规范

    阿里云短信签名规范如下: 个人用户签名要求: 需要提供个人证件的正反面扫描件,并保证所提供的信息真实有效。 签名长度不能超过15个字符。 企业用户签名要求: 需要提供企业营业执照的副本,并保证所提供的信息真实有效。 签名长度不能超过10个字符。 签名规范要求: 签名只能包含中文、英文大小写、数字和部分特殊字符(冒号、英文组合符号、全角符号等)。 签名不能包含…

    2023年10月22日
    15500
  • 提升企业对外形象:阿里云企业邮箱的专业优势

    提升企业对外形象:阿里云企业邮箱的专业优势 随着企业信息化进程的不断推进,电子邮件已经成为了企业日常沟通中不可或缺的工具。在这个信息高速发展的时代,如何通过专业的邮箱系统提升企业的对外形象,成为了很多企业关注的重点。阿里云企业邮箱,作为国内领先的云服务提供商——阿里云推出的邮箱服务,不仅具备稳定高效的技术支持,更在提升企业形象、提升沟通效率等方面表现突出。本…

    2025年3月19日
    2700
  • 阿里云轻量应用服务器去掉监控

    要从阿里云轻量应用服务器中去掉监控,您可以按照以下步骤进行操作: 登录阿里云控制台,进入轻量应用服务器的管理页面。 在左侧导航栏中,找到并点击“监控”选项。 在监控页面中,您可以看到当前已经设置的监控项。找到您想要去掉的监控项,点击右侧的“删除”按钮。 在弹出的确认提示框中,点击“确定”进行删除操作。 删除完成后,您可以刷新页面验证监控项是否已经成功删除。 …

    2023年9月3日
    15600
  • 日土阿里云企业邮箱代理商:怎么给阿里云邮箱发邮件

    如何给阿里云邮箱发邮件 阿里云企业邮箱作为一款专业的企业邮件服务产品,提供了稳定、安全、便捷的电子邮件解决方案,让企业用户能够高效地进行邮件沟通。下面我们来介绍如何给阿里云邮箱发送邮件。 步骤一:登录阿里云邮箱 首先需要登录阿里云企业邮箱的官方网站,在登录页面输入您的企业邮箱账号和密码,完成登录操作。 步骤二:点击“新建邮件” 登录成功后,点击页面上方的“新…

    2024年2月20日
    14600
  • 衡阳阿里云代理商:access2007 修复数据库

    Access 2007 修复数据库的方法如下: 1.备份数据库:在进行修复操作之前,建议先备份数据库以防修复过程中出现问题。 2.打开 Access 2007 并选择要修复的数据库。 3.在“外部数据”选项卡下选择“数据库工具”,然后选择“紧凑和修复数据库”。 4.在弹出的“紧凑和修复数据库”对话框中选择要修复的数据库,并指定修复后的数据库文件名和存储位置。…

    2024年3月9日
    17700

发表回复

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

联系我们

4000-747-360

在线咨询: QQ交谈

邮件:ixuntao@qq.com

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

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