如何在将文件上传到浏览器时获取进度条

<input type="file" id="fileInput">

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function(event) {
  if (event.lengthComputable) {
    var percent = (event.loaded / event.total) * 100;
    console.log('上传进度：' + percent + '%');
  }
});

xhr.open('POST', '/upload', true);

xhr.send(file);

<input type="file" id="fileInput">

<script>
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];
  var xhr = new XMLHttpRequest();

  xhr.upload.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
      var percent = (event.loaded / event.total) * 100;
      console.log('上传进度：' + percent + '%');
    }
  });

  xhr.open('POST', '/upload', true);
  xhr.send(file);
</script>