一、进度条的原理

新知识点：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. Openstack容器项目之Magnum

    本文以Newton版本为例. 1.Magnum简介 Magnum项目通过Openstack API能够在Openstack中创建基于容器的服务,但它本身并不直接对容器进行操作,而是通过Kubernet ...

  2. 关于github中的README.md文件

    0x01 README.md文件是用Markdown语言编写的,md=Markdown; 在线编辑工具: https://stackedit.io/editor# https://maxiang.io ...

  3. ubuntu通过虚拟域名访问不了 502 / 网络错误

    ##之前把虚拟机的lamp环境搭建好,但是通过自己windows在浏览器访问一直不能正常运行. 简单说明一下我的相关设置: 1.设置windows的ip映射 C:\Windows\System32\d ...

  4. [java多线程] - Thread&Runnable运用

    负载是一个很大的话题,也是一个非常重要的话题.不管是在大的互联网软件中,还是在一般的小型软件,都对负载有一定的要求,负载过高会导致服务器压力过大:负载过低又比较浪费服务器资源,而且当高请求的时候还可能 ...

  5. ubuntu12.04下安装pptp_vpn服务器

    1.下载安装apt-get install pptpd 2.配置/etc/pptpd.confvim /etc/pptpd.conf添加下面两行(在配置文件的最后取消注释修改IP即可)localip ...

  6. linux文件和目录权限

    linux系统文件和目录的权限说明 文件权限是Linux系统的第一道安全防线,基本的权限有读取(r).写入(w)和执行(x): 文件访问模式 读取:用户能够读取文件信息,查看文件内容. 写入:用户可以 ...

  7. ASP.NET 运行机制详解

    1.浏览器和服务器的交互原理 通俗描述:我们平时通过浏览器来访问网站,其实就相当于你通过浏览器去访问一台电脑上访问文件一样,只不过浏览器的访问请求是由被访问的电脑上的一个 WEB服务器软件来接收处理, ...

  8. 【2017年新篇章】 .NET 面试题汇总（二）

    本次给大家介绍的是我收集以及自己个人保存一些.NET面试题第二篇 第一篇文章请到这里:[2017年新篇章] .NET 面试题汇总(一) 简介 此次包含的不止是.NET知识,也包含少许前端知识以及.ne ...

  9. JS中的onclick事件

    原文链接:https://segmentfault.com/q/1010000007955542?_ea=1503986 我自己做了一下测试. 这个是在html里面直接绑定onclick事件,我打印了 ...

  10. Handlebars模板引擎之进阶

    取得索引 我想取得索引作为序号这个是常用的.在handlebars也是存在的. 就是使用 @index 来获取索引 {{#each this}} <tr> <td>{{ @in ...