[jquery]为jQuery.ajax添加onprogress事件

原理：

给XMLHttpRequest对象的upload属性绑定onprogress方法监听上传过程

var xhr = new XMLHttpRequest(); xhr.upload.onprogress = function(e) {}

因为jQuery默认使用的XMLHttpRequest对象是内部生成的无法直接给jq的xhr绑定onprogress方法

所以只要给jQuery重新生成一个绑定了onprogress的XMLHttpRequest对象即可实现

首先封装一个方法传入一个监听函数返回一个绑定了监听函数的XMLHttpRequest对象

var xhrOnProgress=function(fun) {xhrOnProgress.onprogress = fun; //绑定监听//使用闭包实现监听绑return function() {//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象var xhr = $.ajaxSettings.xhr();//判断监听函数是否为函数if (typeof xhrOnProgress.onprogress !== 'function')return xhr;//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去if (xhrOnProgress.onprogress && xhr.upload) {xhr.upload.onprogress = xhrOnProgress.onprogress;}return xhr;}
}

上传时使用$.ajax方法

var formData = new FormData(document.forms[0]);$.ajax({url : url,type : 'POST',  data : formData,   //不处理表单数据  processData : false,   //不处理contentType  contentType : false,  beforeSend:function(){      console.log("start transfer");  },  success : function(responseStr) {       console.log(responseStr);  },   error : function(responseStr) {      console.log("error");  },  //用自定义的xhr代替jquery的xhrxhr:xhrOnProgress(function(e){var percent=e.loaded / e.total;//计算百分比})
});

转载于:https://www.cnblogs.com/yiyide266/p/6932250.html

[jquery]为jQuery.ajax添加onprogress事件相关推荐

html div的点击事件,Jquery为DIV添加click事件的简单实例
今天在做一个抽奖活动时小编要做一个抽奖没有中奖之后直接弹出一个提示,然后再给div添加一个事件了,下面我们来看这个例子的做法. html jquery事件 $('#click_ms').click(f ...
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
Java程序员从笨鸟到菜鸟之（八十九）跟我学jquery（五）jquery中的ajax详解
Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数 ...
jQuery源码 Ajax模块分析
写在前面: 先讲讲ajax中的相关函数,然后结合函数功能来具体分析源代码. 相关函数: >>ajax全局事件处理程序 .ajaxStart(handler) 注册一个ajaxStart事件 ...
用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
ajax post 没有返回_Ajax异步技术之三：jQuery中的ajax学习
jQuery中的Ajax学习: jQuery是js的一个轻量型框架,已经将js创建的操作进行了封装,而ajax也是js的一部分,所以jQuery也已经将ajax进行了封装. 封装: $.get(url ...
ajax提交前先验证,jQuery验证AJAX之前提交(jQuery validation before AJAX sub
我有以下的jQuery验证代码的简单注册表格: $(document).ready(function(){ $("#registerForm").validate({ rules: ...
jQuery框架学习第六天：jQuery中的Ajax应用
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...
【Ajax】了解Ajax与jQuery中的Ajax
一.了解Ajax 什么是Ajax Ajax 的全称是 Asynchronous Javascript And XML(异步 JavaScript 和 XML). 通俗的理解:在网页中利用 XMLHtt ...

[jquery]为jQuery.ajax添加onprogress事件

[jquery]为jQuery.ajax添加onprogress事件相关推荐

最新文章

热门文章