Find a form's progress on submit

Question

I have a form with many file uploads, the form takes a while to submit. Is there a way with js or jquery or php to get the progress of the form submission?

Answer 1

Yes, it is possible since XHR updates coming with HTML5 (client side, pure javascript). Take a look at XHR updates on html5rocks.com, particularly at uploading file or blob details: here it goes:

HTML

<progress min="0" max="100" value="0">0% complete</progress>

JS

function upload(blobOrFile) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };

  // Listen to the upload progress.
  var progressBar = document.querySelector('progress');
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      progressBar.value = (e.loaded / e.total) * 100;
      progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
    }
  };

  xhr.send(blobOrFile);
}

upload(new Blob(['hello world'], {type: 'text/plain'}));