FileReader

A FileReader object allows a Web application to asynchronously read the contents of a File (or raw data buffer) stored on a user’s computer, using a File or Blob object to specify which File or data to read.

The FileReader type implements an asynchronous file acquisition mechanism.

FileReader has several methods

  • FileReader.abort()

Abort the read operation. On return, the readyState property is DONE.

  • FileReader.readAsArrayBuffer()

Starts reading the contents of the specified Blob. Once completed, the Result property will hold the ArrayBuffer data object of the file being read.

  • FileReader.readAsBinaryString()

Starts reading the contents of the specified Blob. Once completed, the result attribute will contain the original binary data of the file being read.

  • FileReader.readAsDataURL()

Starts reading the contents of the specified Blob. Once done, the result attribute will contain a Base64 string in data: URL format to represent the contents of the file being read.

  • FileReader.readAsText()

Starts reading the contents of the specified Blob. Once completed, the result attribute will contain a string representing the contents of the file that was read.

FileReader() returns a newly constructed FileReader.

To create a FileReader object, it’s as simple as this:

const reader = new FileReader();
Copy the code

The event processing

The event timing
FileReader.onabort Handle abort, an event that is fired when a read operation is interrupted
FileReader.onerror Handles an ERROR event that is fired when an error occurs during the read operation.
FileReader.onload This event is fired when the read operation is complete
FileReader.onloadstart This event is fired when the read operation begins
FileReader.onloadend This event is triggered when the read operation ends (either successfully or failed).
FileReader.onprogress This event is fired when the Blob is read.

Every 50ms or so, the progress event is triggered. We can get the same parameters as the progress of XHR: lengthComputable/loaded and total

If the error event is executed, the load event is not executed

Read text and pictures

Usually we upload files with input=”file”

 <input type="file" onchange="onFile(event)" />
 
Copy the code

File content:

For plain text, we use the readAsText method, as follows:

const content = document.getElementsByTagName("input"); const contentBox = document.getElementsByClassName("contents")[0] let files, type, urlData, html function onFile(e) { console.log(e); files = e.target.files console.log(files, files[0].type, 'files'); Var reader = new FileReader(); if (/image/.test(files[0].type)) { reader.readAsDataURL(files[0]) type = 'image' } else { reader.readAsText(files[0]); type = 'text' } reader.onerror = function () { console.log('error'); } reader.onload = function (e) {// urlData = reader.result; switch (type) { case 'image': html = `<img src = '${urlData}' / >` break; case 'text': html = `<p>${urlData}</p>` } contentBox.innerHTML = html }; }Copy the code

Read the pictures

As you can see, if it’s an image, you can convert the image file to Base64 encoding and display it

Read the text

You can see that if it is text, the text content is read as a string

onprogress

reader.onprogress = function(e){
      if(e.lengthComputable){
          progress = e.loaded / e.total
      }
      console.log(e, progress);
  }
Copy the code

Call onProgress to obtain the current file upload information, as shown in the figure below:

Is typically used to get the upload percentage.

Code word is not easy, I hope the big guy Pointers!