一、进度条的原理

新知识点：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. 用 Lua 实现一个微型虚拟机-基本篇

    用 Lua 实现一个微型虚拟机-基本篇 目录 介绍 机器指令模拟 最终核心代码 虚拟机内部状态可视化 完整项目代码 后续计划 参考 介绍 在网上看到一篇文章 使用 C 语言实现一个虚拟机, 这里是他的 ...

  2. java socket初步学习一 ( tcp)

    Java socket通信程序: 第一版本: 实现功能: 服务器地址:127.0.0.1  端口:5050 客户机:端口5050 客户端发送字符:“t” 服务器接收到该字符并回复:“r” 流程: 建立 ...

  3. Easy单例模式

    在学习单例模式前,不妨问自己几个问题:单例模式是怎么来的,单例模式怎么去用? 单例模式是怎么来的? 这就从设计模式起源开始,他是在实际实践中遇到类似情况可以通用经验所得到的总结,一般在其他模块或者方法 ...

  4. C++STL笔记

    C++STL 1.vector 向量,长度可变的数组 头文件 #include<vector> 1.1vector的定义 vector<typename> name; 例如: ...

  5. 读书笔记 effective c++ Item 15 在资源管理类中提供对原生(raw)资源的访问

    1.为什么需要访问资源管理类中的原生资源  资源管理类是很奇妙的.它们是防止资源泄漏的堡垒,没有资源泄漏发生是设计良好的系统的一个基本特征.在一个完美的世界中,你需要依赖这样的类来同资源进行交互,绝不 ...

  6. ROM与RAM知识

    “ROM”和“RAM”的意思: “ROM”:N年前代表一种只能写入和读取,而不能改写和擦除的设备,可以用光驱CD-ROM来说明这个道理.目前的“ROM”已经不是这个道理了,它的技术已经飞快的发展到现在 ...

  7. 初学jQuery之jQuery选择器

    今天我们就谈论一下jquery选择器,它们大致分成了四种选择器!!!! 1.基本选择器(标签,ID,类,并集,交集,全局) 1.0(模板) <body> <div id=" ...

  8. Weinre 远程调试移动端页面

    Weinre 是一款远程调试工具,使用JS编写, 可以让我们在电脑上直接调试运行在手机上的远程页面,当你的代码已经发布上线,这时候出现了问题,Weinre就可以帮你调试. 调试场景 调试页面在手机上. ...

  9. 【前端】:jQuery下

    前言: 接上一篇博客: [前端]:jQuery上 一.jQuery属性操作 ① attr(设置或返回自定义属性值) input.select.textarea框中的内容, 可以通过attr来获取,但是 ...

  10. 每天一个Linux命令（01）--ls命令

    ls命令是Linux下最常用的命令.ls命令就是list的缩写,缺省下ls用来打印当前目录的清单,如果ls指定其他目录,那么就会显示指定目录里的文件及文件夹清单.通过ls命令不仅可以查看Linux文件 ...