XMLHttpRequest - a problem with event.loaded and event.total values

I use XMLHttpRequest for file upload and in the browser I've a progress bar that show, how big part of image is already uploaded.

  xhr.upload.addEventListener('progress', onprogressHandler, false);

  function onprogressHandler(event) {    
    resp.innerHTML = event.loaded +' and '+ event.total;

    var percent = Math.round((event.loaded / event.total) * 100开发者_StackOverflow中文版);
    var calc_display = document.getElementById('calc');
    calc_display.innerHTML = percent;
  };

If I choose an image for upload and send a form, so I see always the same values of event.loaded and event.total. I think the value event.total is the size of file.

I am a newbie so I haven't so much of experience, but how is possible I have always the same values? (usually about 2.700.000 kB)

Where could be a problem?

---

The progress event spec mentions that a progress event can also have a boolean-valued .lengthComputable attribute. If that attribute is false on a progress event, I would expect the values of event.loaded and event.total to not reflect the progress of the upload.

The specification says that .lengthComputable will be true and .total will reflect the length of the file if the Content-Length header of the XMLHttpRequest is set. It turns out that XMLHttpRequest will not allow setting Content-Length-- search for Content-Length just below that anchor. Presumably they do this because a script might miscalculate the length of the data it is sending and the user agent is far less likely to do so.

Look at the requests that your server is receiving. Do they have a Content-Length header?

---

Values might be same if your uploaded video/image size is small. You can check by uploading video of size more than 70MB and check your loaded and total values, it should give you different values in total and loaded