请选择 进入手机版 | 继续访问电脑版

onep罗浮宫

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 2601|回复: 153

JQuery ajax progress - HTML5

  [复制链接]
  • TA的每日心情
    擦汗
    2017-10-26 06:32
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    21

    主题

    26

    帖子

    47

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    47
    发表于 2014-7-26 16:55:07 | 显示全部楼层 |阅读模式
    Update: See end of post for jQuery versions after 1.5.1

    This is just another reason to love HTML5 and never let it leave your life ♥

    The second version of XMLHttpRequest (XMLHttpRequest2) supports progress events… for upload and download!!!!

    This is very easy to implement if your familiar with JQuery, example code below.

    $.ajax({
      type: 'POST',
      url: "/",
      data: {},
      beforeSend: function(XMLHttpRequest)
      {
        //Upload progress
        XMLHttpRequest.upload.addEventListener("progress", function(evt){
          if (evt.lengthComputable) {  
            var percentComplete = evt.loaded / evt.total;
            //Do something with upload progress
          }
        }, false);
        //Download progress
        XMLHttpRequest.addEventListener("progress", function(evt){
          if (evt.lengthComputable) {  
            var percentComplete = evt.loaded / evt.total;
            //Do something with download progress
          }
        }, false);
      },
      success: function(data){
        //Do something success-ish
      }
    });
    This is done by modifying the XMLHttpRequest provided by “beforeSend” to create event handlers within the AJAX call.

    This is only a simple working example, it should be tested before production use, I have not tested this code when using multiple asynchronous requests.

    Please keep in mind that HTML5 is still under development and this is by no means a perfect solution to upload progress as yet as some browsers do not support it. This does work in Chrome 5, Safari 4 and Firefox 3.1+, don’t know when Internet Explorer might catch up…

    Updated version for jQuery > 1.5.1

    $.ajax({
      xhr: function()
      {
        var xhr = new window.XMLHttpRequest();
        //Upload progress
        xhr.upload.addEventListener("progress", function(evt){
          if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            //Do something with upload progress
            console.log(percentComplete);
          }
        }, false);
        //Download progress
        xhr.addEventListener("progress", function(evt){
          if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            //Do something with download progress
            console.log(percentComplete);
          }
        }, false);
        return xhr;
      },
      type: 'POST',
      url: "/",
      data: {},
      success: function(data){
        //Do something success-ish
      }
    });
    Creates a new XHR object for use, would need to also detect IE and deliver the activeX in production.

    该用户从未签到

    0

    主题

    0

    帖子

    17

    积分

    普通凡人

    Rank: 1

    积分
    17
    发表于 2017-12-27 18:11:06 | 显示全部楼层

    该用户从未签到

    0

    主题

    234

    帖子

    252

    积分

    禁止访问

    积分
    252
    发表于 2017-12-27 18:17:10 | 显示全部楼层
    提示: 作者被禁止或删除 内容自动屏蔽

    该用户从未签到

    0

    主题

    236

    帖子

    233

    积分

    禁止发言

    积分
    233
    发表于 2017-12-27 18:20:00 | 显示全部楼层
    提示: 作者被禁止或删除 内容自动屏蔽

    该用户从未签到

    0

    主题

    236

    帖子

    233

    积分

    禁止发言

    积分
    233
    发表于 2017-12-27 21:18:21 | 显示全部楼层
    提示: 作者被禁止或删除 内容自动屏蔽

    该用户从未签到

    0

    主题

    198

    帖子

    219

    积分

    禁止发言

    积分
    219
    发表于 2017-12-27 23:18:52 | 显示全部楼层
    提示: 作者被禁止或删除 内容自动屏蔽

    该用户从未签到

    0

    主题

    0

    帖子

    28

    积分

    普通凡人

    Rank: 1

    积分
    28
    发表于 2017-12-27 23:50:17 | 显示全部楼层

    该用户从未签到

    0

    主题

    234

    帖子

    252

    积分

    禁止访问

    积分
    252
    发表于 2017-12-28 05:12:23 | 显示全部楼层
    提示: 作者被禁止或删除 内容自动屏蔽

    该用户从未签到

    0

    主题

    198

    帖子

    219

    积分

    禁止发言

    积分
    219
    发表于 2017-12-28 13:13:56 | 显示全部楼层
    提示: 作者被禁止或删除 内容自动屏蔽

    该用户从未签到

    0

    主题

    236

    帖子

    233

    积分

    禁止发言

    积分
    233
    发表于 2017-12-28 13:17:25 | 显示全部楼层
    提示: 作者被禁止或删除 内容自动屏蔽
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|oeplj.com.  

    GMT+8, 2019-2-16 12:55 , Processed in 0.089775 second(s), 29 queries .

    Powered by Discuz! X3.1

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表