When using XMLHttpRequest for file upload in the browser, a progress bar is implemented to show the amount of the image that has been uploaded. The following code snippet demonstrates how this is achieved:
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);
var calc_display = document.getElementById('calc');
calc_display.innerHTML = percent;
};
Despite setting up the progress bar, the issue arises when the values of event.loaded and event.total remain static, typically around 2,700,000 kB. This raises concerns among newcomers as to why these values do not change during the upload process.
As a beginner in utilizing XMLHttpRequest for file uploading, it is important to troubleshoot and identify potential problems that may cause this inconsistency in values. Further investigation is required to determine the root cause of this discrepancy and enable a successful file upload process.