一、进度条的原理

新知识点：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. http协议详解(超详细)

    http1. 基础概念篇 1.1 介绍 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web Consorti ...

  2. 【.Net Framework 体积大？】不安装.net framework 也能运行！？原理简介-2

    接上一篇 [.Net Framework 体积大?]不安装.net framework 也能运行!?开篇叙述-1 昨天写了一个引子,还是有读者对这套“小把戏”感兴趣.那么不辜负大家的希望,争取博主不做 ...

  3. 关于DOM的理解

    每个载入浏览器的HTML文档都会生成一个Document对象 Document对象使我们可以从脚本中对HTML中的所有元素进行访问 DOM实际上是以面向对象方式描述的对象模型,它将文档建模为一个个对象 ...

  4. Python sphinx-build在Windows系统中生成Html文档

    看到前同事发布的“Markdown/reST 文档发布流水线”基于TFS.Docker.Azure等工具和平台进行文档发布的介绍说明,不得不在心中暗暗竖起大拇指.这套模式,实现了文档编写后版本管理.发 ...

  5. jQuery源码学习:Deferred Object

    本文所有讨论均基于jQuery版本3.1.1,官网http://jquery.com/. 一．Deferred Object 1. 简介和创建 详见API:http://api.jquery.com/ ...

  6. 【排序算法】快速插入排序算法 Java实现

    基本思想 每次将一个待排序的记录,按其关键字大小插入到前面已经排好序的子序列中的适当位置,直到全部插入完成. 设数组为a[0...n-1] 初始时,a[0]自成一个有序区,无序区为a[1...n-1] ...

  7. HTML第一课

    <标签名 属性>内容</标签名> <标签/> 静态网页与动态网页的区别:是否从数据库提取数据相对路径跟绝对路径../代表高一级的&nbsp牛逼的空格< ...

  8. vue2.0全局组件之pdf

    目的:像elementUI那样注册全局组件 预览pdf文件 技术支持:使用火狐的pdf.js http://mozilla.github.io/pdf.js/ 准备:新建一个CPdf.vue文件,把火 ...

  9. Javascript学习十

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  10. 从源码解析TreeMap

    上篇文章我们介绍了HashMap集合,这是一个键值对集合,可以高效的按照键查找数值.但是它有一个缺陷:数据如果是无序的可以是很高效的,但是如果数据需要排列有顺序就不适合了.本篇将要介绍的一个集合是树集 ...