一、进度条的原理

新知识点：Html5中FormData，xmlHttpRequest中的upload属性，progress事件监控

xmlHttpRequest中的upload属性，实现：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <script src="js/jquery-1.9.1.js"></script>
  7.  
  8.  </head>
  9.  <body>
  10.      <form action="#" id="form" method="post" enctype="multipart/form-data">
  11.              <input type="text" name="password"><br>
  12.              <input type="file" id="file" name="apk_file" class="file"><br>
  13.      </form>
  14.      <input type="button" value="ajax" id="ajax">
  15.  
  16.  </body>
  17.      <script>
  18.          window.onload=function(){
  19.  
  20.              document.getElementById('ajax').addEventListener('click',function(){
  21.  
  22.                  var formElement = document.getElementById("form");
  23.                  var xhr=getXhr();
  24.                  console.log(xhr.progress,xhr.upload)
  25.                  var data=new FormData(formElement)
  26.                  //
  27.                  // console.log(xhr.progress,xhr.upload)
  28.                  // 判断浏览器是否有xhr.upload属性
  29.                   if (xhr.upload) {
  30.                       //开始
  31.                       xhr.upload.onloadstart =function(e){
  32.                           console.log(e,'start开始')
  33.                       }
  34.  
  35.                       //发送
  36.                      xhr.upload.onprogress = function (e) {
  37.                          var done = e.position || e.loaded, total = e.totalSize || e.total;
  38.                          console.log('xhr.upload.onprogress: ' + done + ' / ' + total + ' = ' + (Math.floor(done / total * 1000) / 10) + '%,onprogress. ');
  39.                      };
  40.  
  41.                      //结束 事件 loadend：在通信完成或者触发error、abort或load事件后触发。 4种 不同的事件
  42.                      //成功返回调用方法
  43.                      xhr.upload.onload =function(e){
  44.                           console.log('onloadend')
  45.                       }
  46.                       //错误返回调用方法
  47.                      xhr.upload.onerror =function(e){
  48.                           console.log('onerror')
  49.                       }
  50.  
  51.                      xhr.upload.onloadend =function(e){
  52.                           console.log('onloadendend')
  53.                       }
  54.  
  55.                      //发送完成 请求状态监控
  56.                      xhr.onreadystatechange = function (e) {
  57.                      if (4 == this.readyState) {
  58.                              console.log('xhr upload complete',e,'onreadystatechange状态为4的时候');
  59.                          }
  60.                      };
  61.                  }
  62.                  xhr.open("POST", "01.php");
  63.                  xhr.send(data);
  64.              })
  65.          }
  66.  
  67.          // 定义创建XMLHttpRequest对象的函数
  68.      function getXhr(){
  69.          // 声明XMLHttpRequest对象
  70.          var xhr;
  71.          // 根据不同浏览器创建
  72.          if(window.XMLHttpRequest){
  73.              // 其他浏览器
  74.              xhr = new XMLHttpRequest();
  75.          }else{
  76.              // IE浏览器(8及之前)
  77.              xhr = new ActiveXObject("Microsoft.XMLHttp");
  78.          }
  79.          // 返回XMLHttpRequest对象
  80.          return xhr;
  81.      }
  82.      </script>
  83.  </html>
  84.
 

xmlhtmlrequest.upload属性下面的方法有： 来源

Event listeners Data type of response property
onloadstart The fetch starts
onprogress Data transfer is going on
onabort The fetch operation was aborted
onerror The fetch failed
onload The fetch succeeded
ontimeout The fetch operation didn't complete by the timeout the author specified
onloadend The fetch operation completed (either success or failure)

通过progress事件，实现：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <script src="js/jquery-1.9.1.js"></script>
  7.  
  8.  </head>
  9.  <body>
  10.      <form action="#" id="form" method="post" enctype="multipart/form-data">
  11.              <input type="text" name="password"><br>
  12.              <input type="file" id="file" name="apk_file" class="file"><br>
  13.      </form>
  14.      <input type="button" value="ajax" id="ajax">
  15.  
  16.  </body>
  17.      <script>
  18.  
  19.      document.getElementById('file').addEventListener('change', function (e) {
  20.          var xhr = getXhr();
  21.          // 通过formData 获得参数 this.File
  22.          var data=new FormData(document.getElementById("form"))
  23.          // 监控 progress事件
  24.          xhr.addEventListener('progress', function (e) {
  25.              var done = e.position || e.loaded, total = e.totalSize || e.total;
  26.              console.log('xhr progress: ' + (Math.floor(done / total * 1000) / 10) + '%');
  27.          }, false);
  28.  
  29.          xhr.onreadystatechange = function (e) {
  30.              if (4 == this.readyState) {
  31.                  console.log(['xhr upload complete', e]);
  32.              }
  33.          };
  34.          xhr.open('post', '01.php', true);///这里写上url~
  35.          xhr.send(data);
  36.      }, false);
  37.  
  38.      function getXhr(){
  39.          // 声明XMLHttpRequest对象
  40.          var xhr;
  41.          // 根据不同浏览器创建
  42.          if(window.XMLHttpRequest){
  43.              // 其他浏览器
  44.              xhr = new XMLHttpRequest();
  45.          }else{
  46.              // IE浏览器(8及之前)
  47.              xhr = new ActiveXObject("Microsoft.XMLHttp");
  48.          }
  49.          // 返回XMLHttpRequest对象
  50.          return xhr;
  51.      }
  52.      </script>
  53.  </html>

https://developer.mozilla.org/zh-CN/docs/Web/Events/%E8%BF%9B%E5%BA%A6%E6%9D%A1

Property Type Description
target 只读 EventTarget The event target (the topmost target in the DOM tree).
type 只读 DOMString The type of event.
bubbles 只读 Boolean Whether the event normally bubbles or not
cancelable 只读 Boolean Whether the event is cancellable or not?
lengthComputable boolean Specifies whether or not the total size of the transfer is known. Read only.
loaded unsigned long (long) The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.
total unsigned long (long) The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.

ajax ----进度条的原理的更多相关文章

  1. 基于Blod的ajax进度条下载实现

    普通的浏览器下载 在web开发中,如果要实现下载功能,往往都是使用新开web页面或者是使用iframe的形式.实现起来其实很简单: <a target="_blank" hr ...

  2. OK335xS psplash 进度条工作原理 hacking

    #!/bin/sh # # rc This file is responsible for starting/stopping # services when the runlevel changes ...

  3. ajax进度条

    .graph { width: 400px; height: 25px; border: 1px solid #f8b3d0; } .bar { background-color: #ffe7f4; ...

  4. HTML5-svg圆形饼状图进度条实现原理

    <svg width="440" height="440" viewbox="0 0 440 440"> <circle ...

  5. 关于 webapi ajax进度条信息设置

    1.Web.config 设置跨域 <httpProtocol> <customHeaders> <add name="Access-Control-Allow ...

  6. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  7. jQuery ajax 标准写法及进度条绘制

    jQuery ajax 标准写法及进度条绘制 $.ajax({ url: "http://www.microsoft.com", //请求的url地址 dataType: &quo ...

  8. php实现进度条原理

    PHP实现进度条的原理: 模版替换,在页面设置一个标识,轮子自己的页面,不发请求给服务器,由服务器端获得进度,然后替换该页面标识,达到进度条效果. 页面代码: 1 2 3 4 5 6 7 8 9 10 ...

  9. PHP上传实现进度条

    Web上传文件的三种解决方案

随机推荐

  1. AngularJS2环境配置

    所使用到的文件目录结构如下所示: 1.      创建配置文件: 1.1.  创建目录: mkdir angular-quickstart cd angular-quickstart 1.2.  载入 ...

  2. Ceph BlueStore 解析：Object IO到磁盘的映射

    作者:吴香伟 发表于 2017/02/19 版权声明:可以任意转载,转载时务必以超链接形式标明文章原始出处和作者信息以及版权声明 简单回顾下Ceph OSD后端存储引擎的历史. 为解决事务原子性问题, ...

  3. android学习1——LinearLayout

    用linearLayout,上面放4个按钮,不作任何设置.xml文件内容如下: <?xml version="1.0" encoding="utf-8"? ...

  4. WP8.1开发中找程序下的Assets文件夹

    这俩天在开发另一个程序时,遇到一个小问题:如何调用程序下的Assets文件夹及其下的文件和文件夹: 在网上找了两天,基本上是关于如何调用手机中库的方法,没找到有关介绍如何调用查找 编译前添加图片或其它 ...

  5. MongoDB【第二篇】集群搭建

    第一步:准备 1.安装包 mongodb-linux-x86_64-rhel70-3.4.2.tgz 2. 架构: 本文为 1-primary.1-secondary.1-arbiter 的 mong ...

  6. MySQL 修改最大连接数

    方法一:进入MySQL安装目录 打开MySQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为 max_connections=1000 服务里重起MySQ ...

  7. maven 常用脚本

    Maven库: http://repo2.maven.org/maven2/ Maven依赖查询: http://mvnrepository.com/ Maven常用命令: 1. 创建Maven的普通 ...

  8. 每天一个linux命令(56)--crontab命令

    上一节学习了 at  命令是针对仅运行一次的任务,循环运行的例行性计划任务,Linux 系统则是由 cron(crond)这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个 ...

  9. 不要怂，就是GAN (生成式对抗网络) （六）：Wasserstein GAN（WGAN） TensorFlow 代码

    先来梳理一下我们之前所写的代码,原始的生成对抗网络,所要优化的目标函数为: 此目标函数可以分为两部分来看: ①固定生成器 G,优化判别器 D, 则上式可以写成如下形式: 可以转化为最小化形式: 我们编 ...

  10. [PKU2389]Bull Math (大数运算)

    Description Bulls are so much better at math than the cows. They can multiply huge integers together ...