CODEWITHSUNDEEP
javascriptajaxxmlhttprequestprogress
Christopher Francisco
Christopher Francisco

Reputation: 16268

XHR onProgress completed

I'm trying to implement a label with the percentaje of upload using ajax. The problem is that after the xhr returned 100%, it still takes about 17 seconds until the readyState==4 and status==200.

I am sending a picture (png/jpg) and strings using FormData() object

<form onclick='send(this)'....

and the function is:

function send(form){ var f = new FormData(form).......

I am using the following code for the upload

if(xhr.upload) {
    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            var perc = Math.round((e.loaded/e.total) * 100);
            var state = {
                'done': e.loaded,
                'total': e.total,
                'percent': perc
            };
            progress(state);
        }
    };
}

Upvotes: 1

Views: 1051

Answers (1)

Ray Nicholus
Ray Nicholus

Reputation: 19890

This is most likely an issue with your server, not your client-side code. Your onreadystatechange handler will be called with a readyState value of 4 only after the server has returned a response to the underlying request. The loaded/total values passed into your onprogress handler indicate the number of bytes that have been sent to the server. If total === loaded, this does not necessarily indicate that the server has returned a response. The server may perform some processing after the last byte has been received, and then return a response (triggering your onreadstatechange handler). If you are noticing a long period of time between sending of the last byte and the invocation of your onreadystatechange handler, this indicates that your server is, for whatever reason, taking its time responding to the request.

Upvotes: 2

Related Questions