Monitor reading progress and display progress bar when uploading files

Time:2019-7-19

When we use asynchronous event processing, we can also gain an advantage, that is, we can monitor the progress of reading files; this is very useful for reading large files, finding errors and predicting the completion time of reading.

onloadstartandonprogressEvents can be used to monitor read progress.

The following example demonstrates how to monitor the read status by displaying a progress bar. To see the actual effect of the progress indicator, try reading files in large files or remote drives.

<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 reading </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 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 Progress Event.
    if (e.lengthComputable) {
      var percentLoaded = Math.round((e.loaded / e.total) * 100);
      // Update progress bar长度
      if (percentLoaded < 100) {
        progress.style.width = percentLoaded + '%';
        progress.textContent = percentLoaded + '%';
      }
    }
  }
  // Select the method after uploading files
  function handleFileSelect(e) {
    // Reset the progress indicator after selecting a new file
    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 shows 100% at the end.
      progress.style.width = '100%';
      progress.textContent = '100%';
      SetTimeout ("alert ('file read successfully! '), 0;
    }

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

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

TipsTo see the actual effect of the progress indicator, try reading resources from large files or remote drives.