Question

我使用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，用于放入progress事件，但我不知道如何将进度（或任何）事件绑定到$ .ajax（）调用。我已经使用了ajaxSend和Complete，如：

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

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

Answer 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..

        });

多数民众赞成我的进步现在正在显示...... :)

如何在上传文件时将“progress”和更新事件绑定到ajax请求

1 个答案: