上传文件时如何将“进度”和更新事件绑定到 ajax 请求答案

【问题标题】：How to bind a "progress" and update event to an ajax request when uploading a file上传文件时如何将“进度”和更新事件绑定到 ajax 请求
【发布时间】：2013-12-25 17:44:51
【问题描述】：

我正在使用 php-codeigniter 中的 FormData api 和 ajax 将文件上传到服务器。我的上传在文件选择事件上运行良好。但我想在每个正在上传的文件旁边显示一个进度条，并带有更新的百分比。我的ajax是：

$.ajax({
    url : "<?=site_url('admin/commoncontroller/upload')?>",
    type : "POST",
    beforeSend : function( xhr ) {
        xhr.overrideMimeType("text/plain; charset=x-user-defined-binary");
    },
    processData : false,
    cache : false,
    contentType : false,
    data : fd                
}).done(function(res){
    alert (res);
})

我找到了两个 ajax 事件，即 AjaxSend 和 Complete 来放置进度事件，但我不知道如何将进度（或任何）事件绑定到 $.ajax() 调用。我已经使用了 ajaxSend 和 Complete 之类的：

$(document).bind("ajaxSend", function(){
    $(".easyPieChart").show();
}).bind("ajaxComplete", function(){
    $(".easyPieChart").hide();
});

但是这些事件只是在开始结束时显示一个进度条（它是一个画布）在完成时消失.. 不是以百分比更新。任何想法如何做到这一点..谢谢。

【问题讨论】：

可以使用代码@jsfiddle.net/5ZRfY制作进度条
sitepoint.com/tracking-upload-progress-with-php-and-javascript
@Akshat 感谢我的早期反馈..
@samitha 谢谢你。我会检查它..
@Akshat 对不起兄弟..这只是一个进度条动画.. 我的主要要求是显示来自服务器的真实更新百分比，我认为这可以通过持续/运行的 ajx 请求事件。我想我明白了，但只是不知道如何将侦听器添加到 $.ajax.. 还是谢谢。

标签： javascript php jquery ajax codeigniter

【解决方案1】：

找到了一种方法来做到这一点..

    $.ajax({ //all prviuos codes and the new things to add as follows:
            ....
            ....

      xhrFields : { 
                  onprogress: function (e) {
                     if (e.lengthComputable){
                     var percentage= Math.round(e.loaded / e.total * 100);
                     $("#percentage").prop('data-percent',percentage);
                     $(".percent").text(percentage);
                     canvas.update(percentage);}
                   },

                  onload  : function(e){
                    if (e.lengthComputable){
                                canvas.update(100);
                    }
                    }
                 },
           //Other ajax context here..

        });

这就是我的进度现在正在显示... :)

【讨论】：