javascript - Ajax 调用进度百分比(指示器)

Question

我有一个数据类型为 JSON 的 AJAX 调用，当运行 AJAX 调用时，进度百分比显示在“console.log”中，但在完成上传文件之前达到百分比 100%在磁盘上。如何将百分比与流程的实际进度同步？等待解答，谢谢!

JavaScript

$(document).on('click','.btnSend',function() {
        var imagem = $(this).closest('img.img-preview');
        if (imagem.length>0)
        {
            img_data = imagem.attr('src'); //base64
            img_size = imagem.attr('size');         
        }
        var myjson_imagem = JSON.stringify({img_data: img_data,img_size:img_size});
        $.ajax
        ({
            type: "POST",
            url: "ajax_upload.php",
            data: {dataimagem:myjson_imagem},
            datatype: 'json',
            complete: function(){
                $("[data-toggle='tooltip']").tooltip();
            },
            cache: false,
            async: true,

            xhr: function () {
                var xhr = $.ajaxSettings.xhr();
                xhr.onprogress = function e() {
                    // For downloads
                    if (e.lengthComputable) {
                        console.log((e.loaded / e.total *100|0)+"%");
                    }
                };
                xhr.upload.onprogress = function (e) {
                    // For uploads
                    if (e.lengthComputable) {
                        console.log((e.loaded / e.total *100|0)+"%");
                    }
                };
                return xhr;
            },

            success: function(response)
            {
                console.log(response);                                                              
                var obj = JSON.parse(response);         
                var result = obj[0].ajax_result;
                switch (result)
                {
                    case "0": console.log('upload ok'); break;
                    case "1": console.log('upload not ok'); break;

                }
            },
            error: function()
            {
                alert('ajax error UPLOAD');
            }
        });
    });

日志

scriptx.js:1225 3%
scriptx.js:1225 97%
scriptx.js:1225 100%

Answer 1

我最近使用了一个类似的 ajax 函数来处理文件 uploader 的进度条。在上传完全完成之前，它达到 100% 时我没有遇到任何问题。我在下面包含了一个示例。

    xhr: function() {
                var xhr = $.ajaxSettings.xhr() ;
                // set the onprogress event handler
                xhr.upload.onprogress = function(evt) { 

                    let percentComplete = evt.loaded / evt.total*100+'%';
                    console.log(percentComplete);
};

希望对您有所帮助。