Ajax call percentage of progress (indicator)

Question

I have an AJAX call with datatype JSON, when run the AJAX call, the percentage of progress is indicated in the 'console.log', but the percentual 100% reached before completing the upload file on disk. How do I sync the percentage with the actual progress of the process? I await answers, thank you!

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');
            }
        });
    });

Log

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

there's three parts to this process. The browser sending the data to the server, the server handling the data, and the client downloading the data from the server. Currently you are only watching the first and third parts. The 2nd can't be done without the server somehow pushing that information to the client. — Kevin B, Dec 11 '15 at 20:21
I'm guessing this `xhr.onprogress = function e() {` should probably be this `xhr.onprogress = function (e) {` ? — chiliNUT, Dec 11 '15 at 20:21
Don't use `.on*`, use [`.addEventListener`](https://developer.mozilla.org/pl/docs/Web/API/Element/addEventListener). — Michał Perłakowski, Dec 11 '15 at 20:21
http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick — Michał Perłakowski, Dec 11 '15 at 20:25
@Gothdo This matter (on...addevent..) was not what I asked =/ — Fábio Zangirolami, Dec 11 '15 at 20:36
@KevinB I installed the extension 'UPLOADPROGRESS' successfully [link](http://www.ultramegasoft.com/blog/2010/10/create-an-upload-progress-bar-with-php-and-jquery/) .. but I can not join with my ajax request, you can give me a hint? — Fábio Zangirolami, Dec 13 '15 at 22:17

d3ucalion · Answer 1 · 2015-12-11T20:52:09.483

1

I recently used a similar ajax function where I handled a progress bar for a file uploader. I didn't run into any issues with it reaching 100% before the upload had fully completed. I have included an example below.

    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);
};

I hope this helps.

edited Dec 11 '15 at 20:52

answered Dec 11 '15 at 20:39

d3ucalion

11
4

My ajax response is not returned, and is showed me 100% in console! is it something related data: {....} ? – Fábio Zangirolami Dec 11 '15 at 20:52
Have you tried setting async to false? It seems like it may just be that it's not waiting for the response and is continuing because async is set to true. – d3ucalion Dec 11 '15 at 20:57
I moved to false and now not showed progress in console – Fábio Zangirolami Dec 11 '15 at 21:01
Is there a specific reason why you are including the bitwise OR operator after multiplying by 100? – d3ucalion Dec 11 '15 at 21:09
in my file 'upload.php' I have '$img_data = base64_decode ($img_data);' and it is not synchronized with the progress in the ajax call. – Fábio Zangirolami Dec 11 '15 at 21:16

Ajax call percentage of progress (indicator)

1 Answers1