When using asynchronous event processing, we can also get an advantage by the way, that is, we can monitor the reading progress of files; this is very practical for reading large files, finding errors and predicting the completion time of reading.

onloadstart and onprogress events can be used to monitor read progress.

The following example shows how to monitor read status by displaying a progress bar. To see the actual effect of the progress indicator, try reading from a large file or from a remote drive.

<style>
  #progress_bar {
    margin: 10px 0;
    padding: 3px;
    border: 1px solid #000;
    font-size: 14px;
    clear: both;
    opacity: 0;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
  }
  #progress_bar.loading {
    opacity: 1.0;
  }
  #progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
  }
</style>

<input type="file" id="files" name="file" />
<button onclick="abortRead();">Cancel read</button>
<div id="progress_bar"><div class="percent">0%</div></div>

<script>
  var reader;
  var progress = document.querySelector('.percent');

  function abortRead() {
    reader.abort();
  }
  // Function after file upload error
  function errorHandler(e) {
    switch(e.target.error.code) {
      case e.target.error.NOT_FOUND_ERR:
        alert('file was not found');
        break;
      case e.target.error.NOT_READABLE_ERR:
        alert('File unreadable');
        break;
      case e.target.error.ABORT_ERR:
        break;
      default:
        alert('Error reading file');
    };
  }
  // Update progress bar
  function updateProgress(e) {
    // e is a ProgressEvent
    if (e.lengthComputable) {
      var percentLoaded = Math.round((e.loaded / e.total) * 100);
      // Update progress bar length
      if (percentLoaded < 100) {
        progress.style.width = percentLoaded + '%';
        progress.textContent = percentLoaded + '%';
      }
    }
  }
  // Choose the method after uploading the file
  function handleFileSelect(e) {
    // Reset progress indicator after new file selection
    progress.style.width = '0%';
    progress.textContent = '0%';

    reader = new FileReader();
    reader.onerror = errorHandler;
    reader.onprogress = updateProgress;
    reader.onabort = function(e) {
      alert('Read cancelled');
    };
    reader.onloadstart = function(e) {
      document.getElementById('progress_bar').className = 'loading';
    };
    reader.onload = function(e) {
      // Make sure the progress bar displays 100% at the end
      progress.style.width = '100%';
      progress.textContent = '100%';
      setTimeout("alert('File read successfully!')", 0);
    }

    // Read file as binary string
    reader.readAsBinaryString(e.target.files[0]);
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Tip: to see the actual effect of the progress indicator, try reading resources from a large file or remote drive.