Question

我有一个数据类型为JSON的AJAX调用，当运行AJAX调用时，进度百分比在＆＃39; console.log＆＃39;中显示，但在完成之前已达到百分比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函数，我处理了文件上传器的进度条。在上传完成之前，我没有遇到任何问题达到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);
};

我希望这会有所帮助。

Ajax调用进度百分比（指标）

1 个答案: