XMLHttpRequest 2 download progress event only firing once

Question

I'm trying to get the progress of an ajax request via the following code:

var xhr = new XMLHttpRequest();


xhr.addEventListener('progress', function(event) {

    console.log(event.loaded / event.total);
},
false);

xhr.addEventListener('load', function() {

    console.log('load');
},
false);


xhr.open('get', 'test.php', true);
xhr.send();

The problem is, the progress event only fires once, right before the load event (that is, in Webkit, it doesn't seem to work under Gecko).

Am I doing something wrong or is it just not supported properly?

Resultant

Are you testing in localhost? – Fescennine

Yes but the remote host gives the same result. – Resultant

Maybe this does help: #77476 – Hull

@Hull The answer, #77476 relies on PHP's readfile. I can't use that because I expect to receive an HTML image element as responseText instead of raw image data. – Resultant

Just make sure your webserver is configured to send the content-length header. – Musso

@Musso Checked the ajax request in Firebug and the content-length header is set. – Resultant

That is all the PHP does. So the script should just work. How large is your test file, and are you testing locally? It could just be that it is loaded before the browser is willing to send a progress event. – Musso

How big is the response? If it's tiny, it's possible that it simply loads so fast. – Fescennine

Will test again with a couple of megabytes. – Resultant

Answer 1

Use

xhr.upload.addEventListener('progress', function(event) { ... });

(note the added .upload)

Nomen

The OP said "DOWNLOAD" in the question, your answer would provide information on the upload portion – Jargon