一、进度条的原理

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

xmlHttpRequest中的upload属性，实现：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script src="js/jquery-1.9.1.js"></script>

 </head>

 <body>

     <form action="#" id="form" method="post" enctype="multipart/form-data">

             <input type="text" name="password"><br>

             <input type="file" id="file" name="apk_file" class="file"><br>

     </form>

     <input type="button" value="ajax" id="ajax">

 </body>

     <script>

         window.onload=function(){

             document.getElementById('ajax').addEventListener('click',function(){

                 var formElement = document.getElementById("form");

                 var xhr=getXhr();

                 console.log(xhr.progress,xhr.upload)

                 var data=new FormData(formElement)

                 //

                 // console.log(xhr.progress,xhr.upload)

                 // 判断浏览器是否有xhr.upload属性

                  if (xhr.upload) {

                      //开始

                      xhr.upload.onloadstart =function(e){

                          console.log(e,'start开始')

                      }

                      //发送

                     xhr.upload.onprogress = function (e) {

                         var done = e.position || e.loaded, total = e.totalSize || e.total;

                         console.log('xhr.upload.onprogress: ' + done + ' / ' + total + ' = ' + (Math.floor(done / total * 1000) / 10) + '%,onprogress. ');

                     };

                     //结束 事件 loadend：在通信完成或者触发error、abort或load事件后触发。 4种 不同的事件

                     //成功返回调用方法

                     xhr.upload.onload =function(e){

                          console.log('onloadend')

                      }

                      //错误返回调用方法

                     xhr.upload.onerror =function(e){

                          console.log('onerror')

                      }

                     xhr.upload.onloadend =function(e){

                          console.log('onloadendend')

                      }

                     //发送完成 请求状态监控

                     xhr.onreadystatechange = function (e) {

                     if (4 == this.readyState) {

                             console.log('xhr upload complete',e,'onreadystatechange状态为4的时候');

                         }

                     };

                 }

                 xhr.open("POST", "01.php");

                 xhr.send(data);

             })

         }

         // 定义创建XMLHttpRequest对象的函数

     function getXhr(){

         // 声明XMLHttpRequest对象

         var xhr;

         // 根据不同浏览器创建

         if(window.XMLHttpRequest){

             // 其他浏览器

             xhr = new XMLHttpRequest();

         }else{

             // IE浏览器(8及之前)

             xhr = new ActiveXObject("Microsoft.XMLHttp");

         }

         // 返回XMLHttpRequest对象

         return xhr;

     }

     </script>

 </html>
 

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事件，实现：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script src="js/jquery-1.9.1.js"></script>

 </head>

 <body>

     <form action="#" id="form" method="post" enctype="multipart/form-data">

             <input type="text" name="password"><br>

             <input type="file" id="file" name="apk_file" class="file"><br>

     </form>

     <input type="button" value="ajax" id="ajax">

 </body>

     <script>

     document.getElementById('file').addEventListener('change', function (e) {

         var xhr = getXhr();

         // 通过formData 获得参数 this.File

         var data=new FormData(document.getElementById("form"))

         // 监控 progress事件

         xhr.addEventListener('progress', function (e) {

             var done = e.position || e.loaded, total = e.totalSize || e.total;

             console.log('xhr progress: ' + (Math.floor(done / total * 1000) / 10) + '%');

         }, false);

         xhr.onreadystatechange = function (e) {

             if (4 == this.readyState) {

                 console.log(['xhr upload complete', e]);

             }

         };

         xhr.open('post', '01.php', true);///这里写上url~

         xhr.send(data);

     }, false);

     function getXhr(){

         // 声明XMLHttpRequest对象

         var xhr;

         // 根据不同浏览器创建

         if(window.XMLHttpRequest){

             // 其他浏览器

             xhr = new XMLHttpRequest();

         }else{

             // IE浏览器(8及之前)

             xhr = new ActiveXObject("Microsoft.XMLHttp");

         }

         // 返回XMLHttpRequest对象

         return xhr;

     }

     </script>

 </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. CTR预估中的贝叶斯平滑方法及其代码实现

    1. 背景介绍 广告形式: 互联网广告可以分为以下三种: 1)展示广告(display ad) 2)搜索广告(sponsored search ad) 3)上下文广告(contextual ad)   ...

  2. 读书笔记 effective c++ Item3 在任何可能的时候使用 const

    Const可以修饰什么?   Const 关键字是万能的,在类外部,你可以用它修饰全局的或者命名空间范围内的常量,也可以用它来修饰文件,函数和块作用域的静态常量.在类内部,你可以使用它来声明静态或者非 ...

  3. JS模块化写法

    /* 模块化写法*/ var Person=function(){ var name='Jone', age='24', sex='male'; function createIdea(){ //{. ...

  4. 一步一步在Windows中使用MyCat负载均衡 上篇

    传统关系型数据库的分布式开发通常需要自己做,不仅耗时耗力而且效果不是很理想,当想快速搭建时,最初想到的是看有没有第三方,网上牛人还是很多的,做得比较好的其中之一Mycat,它是开源的分布式数据库系统, ...

  5. JVM内存分配与回收策略

    对象优先在Eden分配 大多数情况下,对象在新生代Eden区中分配. 当Eden区没有足够空间进行分配时,虚拟机将发起一次Minor GC. Minor GC:新生代GC,指发生在新生代的垃圾收集动作 ...

  6. BZOJ 1834: [ZJOI2010]network 网络扩容（网络流+费用流）

    一看就知道是模板题= = ,不说什么了= = PS:回去搞期末了,暑假再来刷题了 CODE: #include<cstdio> #include<iostream> #incl ...

  7. 不用搭环境的10分钟AngularJS指令简易入门01（含例子）

    不用搭环境的10分钟AngularJS指令简易入门01(含例子) `#不用搭环境系列AngularJS教程01,前端新手也可以轻松入坑~阅读本文大概需要10分钟~` AngularJS的指令是一大特色 ...

  8. linux网卡配置

    6.3网卡配置 DEVICE=eth0 TYPE=Ethernet BOOTPROTO=dhcp ONBOOT=yes NETMASK=255.255.255.0 GETWAY=192.168.1.2 ...

  9. Jsp——http status 404 问题

    今天学习Jspapplication内置对象的时候突然碰到了一个问题——http status 404 发生了什么? 提示The requested resource is not available ...

  10. 每天一个Linux命令（22）--find命令详解

    find 一些常用参数的一些常用实例和一些具体用法和注意事项. 1.使用 name 选项: 文件名选项是 find 命令最常用的选项,要么单独使用该选项,要么和其他选项一起使用. 可以使用某种文件名模 ...