Home >Web Front-end >JS Tutorial >FileReader previews images locally before uploading them

FileReader previews images locally before uploading them

小云云Original: 2018-03-05 09:43:321065browse

The FileReader object allows a web application to asynchronously read the contents of a file (or raw data buffer) stored on the user's computer, using a File or Blob object to specify the file or data to be read. When uploading and previewing images, if there are no special requirements, you can directly transfer the image to the background first. After success, you can get the URL and then render it on the page. This will not cause any problem when the image is relatively small, but it will be slower if it is larger. Only then can you see the preview, and junk files are also generated, so it is better to preview it locally before uploading.

When I was working on a project and looking for a plug-in, I knew that the pure front-end could realize local preview of images, but when I was asked about it during the interview today, I was confused, and then I accidentally discovered the implementation on the computer desktop. demo, and then checked the API based on the demo, and briefly summarized:

First you have to get the File object

When uploading an image using the input tag, the event object will contain a collection of file objects

event.target.files

The core is the FileReader object

According to MDN:

The FileReader object allows web applications to asynchronously read files stored in user files The contents of a file (or raw data buffer) on the computer, using a File or Blob object to specify the file or data to be read.

First, you need to get an instance object of FileReader as a constructor

var freader = new FileReader();

Use the readAsDataURL() method to read the specified content

freader.readAsDataURL(file);

The last thing is an event processing, which is equivalent to monitoring Reading progress, here we render the image when the reading is completed, so use onload

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

After the frame loading is completed, what we finally get is a base64-encoded src address. The specific reason will be checked next time. Write an article about base64 encoding

Complete code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <form action=""> 
 <input type="file" name="files" id="fileTog" accept="image/*" multiple="multiple" onchange="changImg(event)"> 
 <img alt="暂无图片" id="myImg" src="" height="100px" width="100px"> 
 </form>
 <script>
 function changImg(e){ 
 var myImg = document.getElementById('myImg');
 for (var i = 0; i < e.target.files.length; i++) { 
 var file = e.target.files[i]; 
 console.log(file); 
 if (!(/^image\/.*$/i.test(file.type))) { 
  continue; //不是图片 就跳出这一次循环 
 } 
 //实例化FileReader API 
 var freader = new FileReader(); 
 freader.readAsDataURL(file); 
 freader.onload = function(e) { 
  console.log(e);
  myImg.setAttribute(&#39;src&#39;, e.target.result); 
 } 
 } 
 }
 </script>
</body>
</html>

Postscript

Through this incident, I exposed a problem in learning new things, which is to check it out and read it again. As long as you know it, this habit is particularly harmful. In the future, whenever you have a question, you should not only check how it is done, but also understand why it is done. The so-called knowing what it is and why it is done. Also, you can type the code with your hands and try not to copy it. Copying it is fun for a while, but it is embarrassing to not be able to write it by hand.

Today is the third day in Hangzhou and the second day of the interview. An important problem exposed in these two days of interviews is that I usually rely too much on search engines and use too little brain. Even some simple APIs can’t be used. If you don’t remember everything, there are indeed many things in the front end that you need to keep in mind. There are no shortcuts. These things are the basics. If you don’t remember them, you have a poor foundation. Although it does not affect your ability to make things, it will affect development efficiency. If technology is to move forward, this cornerstone must be stable, so keep it in mind!

Related recommendations:

How to implement the JavaScript image local preview function

##jquery implements the browser-compatible image upload local preview function_ jquery

jquery implements local preview function before image upload_jquery

The above is the detailed content of FileReader previews images locally before uploading them. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of top command and output results under LinuxNext article：Detailed explanation of top command and output results under Linux

See more

FileReader previews images locally before uploading them

Related articles