Preview picture

The front end implements image preview in two ways:

  1. Generate a base64 encoding implementation preview through file;
  2. Implementation of a Blob construction URL address implementation preview;
  3. The preview is implemented by constructing the URL address through File.

Here’s how to implement both:

Base64 preview

With the help of the FileReader built-in class, the selected image file is converted to the base64 data format we want.

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Image local preview example</title>
  </head>
  <body>
    <h3>Image local preview example</h3>
    <input type="file" accept="image/*" onchange="loadFile(event)" />
    <img id="previewContainer" />

    <script>
      const loadFile = function (event) {
        const reader = new FileReader();
        reader.onload = function () {
          const output = document.querySelector("#previewContainer");
          output.src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);
      };
    </script>
  </body>
</html>
Copy the code

Image address: data:image/ PNG; base64,iVBORw0KGgoAAAANSUhEU… U5ErkJggg==, a long string

Why is this possible? Then look behind you.

Blob address preview

This method also uses FileReader to convert the image to the values of an ArrayBuffer and then build a SRC link using the Blob.

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Image local preview example</title>
  </head>
  <body>
    <h3>Image local preview example</h3>
    <input type="file" accept="image/*" onchange="loadFile(event)" />
    <img id="previewContainer" />

    <script>
      const loadFile = function (event) {
        const reader = new FileReader();
        reader.onload = function () {
          const output = document.querySelector("#previewContainer");
          const blob = new Blob([fileReader.result]);
          const src = URL.createObjectURL(blob);
          output.src = src;
        };
        reader.readAsArrayBuffer(event.target.files[0]);
      };
    </script>
  </body>
</html>
Copy the code

Picture address finally is: blob: http://127.0.0.1:5501/d3bad4b4-d802-42fe-8773-11e5e39d8b04

This is the FileReader class for this article.

File Address Preview

CreateObjectURL is used to construct a URL that allows a Blob or File object to be used as a URL source for images, links to download binary data, etc.

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Image local preview example</title>
  </head>
  <body>
    <h3>Image local preview example</h3>
    <input type="file" accept="image/*" onchange="loadFile(event)" />
    <img id="previewContainer" />

    <script>
      const loadFile = function (event) {
        const output = document.querySelector("#previewContainer");
        output.src = URL.createObjectURL(event.target.files[0]);
      };
    </script>
  </body>
</html>
Copy the code

FileReader

FileReader asynchronously reads files or data from files or blobs.

Properties and methods:

  1. Filereader. error: Error occurred when reading the file.
  2. Filereader. readyState: the state of reading the file, empty-0- not loaded, load-1 – loading, done-2- complete;
  3. Filereader. result: The content of a file, which is valid only after the file has been read.
  4. Filereader. onabort: Triggered when the read operation is interrupted.
  5. Filereader. onerror: Triggered when reading fails;
  6. Filereader. onload: triggered when reading is complete;
  7. Filereader. onloadStart: triggered when reading begins;
  8. Filereader. onloadEnd: trigger to read end, whether failed or not;
  9. FileReader. Onprogress: Triggered during reading;
  10. Filereader. abort: Abort read operation;
  11. FileReader. ReadAsArrayBuffer: reads the data output for ArrayBuffer format;
  12. FileReader. ReadAsBinaryString: reads the data output of raw binary data;
  13. Filereader. readAsDataURL: Outputs the read data as base64 encoding;
  14. Filereader. readAsText: Outputs the read data as a string.

FileReader supports DOM2 level event binding.

The Blob and ArrayBuffer

For this, please move on to the big guy’s explanation: Po Ge plays with front-end binary