AJAX Progress Bar

HTML

<progress id="progressbar" value="0"></progress>
<button id="button">Enviar</button>
<input type="file" id="arquivo">

JavaScript

var progressbar = document.getElementById('progressbar');
var button = document.getElementById('button');
button.addEventListener('click', upload);

function upload() {
  var request = new XMLHttpRequest();
  request.upload.addEventListener("progress", uploadProgress, false);

  //envia o form
  var formData = new FormData();
  formData.append("file", document.getElementById('arquivo').files[0]);
  request.open("POST", "http://zinoui.com/demo/progress-bar/upload.php");
  request.send(formData);
}

function uploadProgress(event) {
  if (event.lengthComputable) {
    progressbar.max = event.total;
    progressbar.value = event.loaded;
  } else {
    progressbar.value = 50; // não atualiza o valor da progress bar.
  }
}