一直在用 ajax, 但是没有做进度条, 原来 $.ajax 里面封装了 xhr, 只要从这里面取得上传进度.
这是将回调写到变数里
将 xhr 对像放到 $.ajax({....,xhr});
- $.ajax({
- url:'xxxx',
- ....,
- // 获取 ajaxSettings 中的 xhr 对象, 为它的 upload 属性绑定 progress 事件的处理函数
- xhr: function(){
- myXhr = $.ajaxSettings.xhr();
- // 获取 ajaxSettings 中的 xhr 对象, 为它的 upload 属性绑定 progress 事件的处理函数
- if(myXhr.upload){
- // 绑定 progress 事件的回调函数
- myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
- }
- //xhr 对象返回给 jQuery 使用
- return myXhr;
- },
- success:function(){}
- });
绑定到'progress' 这里要自己再定义 progressHandlingFunction
- // 上传进度回调函数:
- function progressHandlingFunction(e) {
- if (e.lengthComputable) {
- //e.loaded 上传大小
- //e.total 文件大小
- var percent = e.loaded/e.total;
- }
- }
这是将回调写到 ajax 过程中
先定一个方法
- var jqureAjaxXhrOnProgress = function(fun) {
- jqureAjaxXhrOnProgress.onprogress = fun; // 绑定监听
- // 使用闭包实现监听绑
- return function() {
- // 通过 $.ajaxSettings.xhr(); 获得 XMLHttpRequest 对象
- var xhr = $.ajaxSettings.xhr();
- // 判断监听函数是否为函数
- if (typeof jqureAjaxXhrOnProgress.onprogress !== 'function')
- return xhr;
- // 如果有监听函数并且 xhr 对象支持绑定时就把监听函数绑定上去
- if (jqureAjaxXhrOnProgress.onprogress && xhr.upload) {
- xhr.upload.onprogress = jqureAjaxXhrOnProgress.onprogress;
- }
- return xhr;
- }
- }
再到 $.ajax({...,})
- $.ajax({
- url:'xxxx',
- ....,
- xhr:jqureAjaxXhrOnProgress(function(e){
- var percent=e.loaded / e.total;
- $('#ajaxfilestext').html(percent);
- }),
- success:function(){}
- });
再根据自己的需求写进度条.
来源: http://www.jianshu.com/p/061ce2b5ed44