JS uses FileReader to implement the local preview function before uploading images,

JS uses FileReader to implement the local preview function before uploading images,

Introduction

During Image Upload and preview, if there are no special requirements, you can directly upload the image to the background, and then get the URL and render it to the page, in this way, there is no problem when the image is relatively small. If it is bigger, it will be slower to see the preview, and a junk file is generated, so it is better to preview it locally before uploading.

When I was looking for plug-ins for items, I knew that only the front-end could implement local image preview. However, when I was asked during the interview today, I was overwhelmed, then I accidentally found the demo on the desktop, and checked the API according to the demo. I will summarize it a little:

First, you must obtain the File object.

When an image is uploaded using the input tag, the event object contains a set of file objects.

event.target.files

The core is the FileReader object.

According to the MDN statement:

The FileReader object allows Web applications to asynchronously read files (or raw data buffer) stored on users' computers and specify the files or data to be read using the File or Blob Object.

First, use the constructor to obtain an instance object of FileReader.

var freader = new FileReader();

Read specified content using readAsDataURL ()

freader.readAsDataURL(file);

Finally, it is an event processing, which is equivalent to monitoring the reading progress. Here we render the image when the reading is complete, so we use onload

freader.onload = function(e) { console.log(e); myImg.setAttribute('src', e.target.result); }

After the mounting is complete, a base64-encoded src address is obtained. Why do you need to write an article about base64 encoding next time?

Complete code

<! DOCTYPE html> 
Postscript
This exposes a problem of learning new things, that is, finding out what I think I have learned. This kind of habit is especially harmful, in the future, when there is a question, we should not only check how it is done, but also understand why it can be done. In addition, you can try not to copy the usual code by hand. It is nice to copy it for a while, but it is also embarrassing to write it when writing it.
Today is the third day of the interview in Hangzhou, and the second day of the interview. An important problem exposed during the interviews in these two days is that they usually rely too much on search engines and use too few brains, even some simple APIs are not completely remembered. The front-end still has many things to remember, and there are no shortcuts. These things are the foundation, but the foundation is poor if you don't remember them. Although you do not affect your ability to make things, it will affect the development efficiency and the technology should go up. The cornerstone must be stable. Come on, remember!
Summary
The above section describes how to use FileReader in JavaScript to preview images uploaded locally. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!