Preview picture
The front end implements image preview in two ways:
- Generate a base64 encoding implementation preview through file;
- Implementation of a Blob construction URL address implementation preview;
- 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:
- Filereader. error: Error occurred when reading the file.
- Filereader. readyState: the state of reading the file, empty-0- not loaded, load-1 – loading, done-2- complete;
- Filereader. result: The content of a file, which is valid only after the file has been read.
- Filereader. onabort: Triggered when the read operation is interrupted.
- Filereader. onerror: Triggered when reading fails;
- Filereader. onload: triggered when reading is complete;
- Filereader. onloadStart: triggered when reading begins;
- Filereader. onloadEnd: trigger to read end, whether failed or not;
- FileReader. Onprogress: Triggered during reading;
- Filereader. abort: Abort read operation;
- FileReader. ReadAsArrayBuffer: reads the data output for ArrayBuffer format;
- FileReader. ReadAsBinaryString: reads the data output of raw binary data;
- Filereader. readAsDataURL: Outputs the read data as base64 encoding;
- 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