Home > Article > Web Front-end > FileReader implements local preview before uploading pictures

FileReader implements local preview before uploading pictures

php中世界最好的语言Original: 2018-04-12 14:53:291497browse

This time I will bring you FileReader to implement local preview before uploading pictures. FileReader to implement local preview before uploading pictures. .

Introduction 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. However, when I was asked about it during the interview today, I was confused. Then I accidentally found the implemented demo on the computer desktop, and then checked based on the demo. I took a look at the API and briefly summarized it:

First we have to get the File object When you use the

input tag

to upload an image, 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 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.

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

constructor

var freader = new FileReader();

Use the readAsDataURL() method to read the specified content

freader.readAsDataURL(file);

The last is an

Event processing

, which is equivalent to monitoring the 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 rack is loaded, what you finally get is a base64 encoded src address. I will find out the specific reason next time and then write a special 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

This incident exposed one of my problems in learning new things. I just check it out and read it once before I know it. This habit is particularly harmful. In the future, whenever I find a question, I not only need to check how to do it. Yes, you also need to understand why you can do this. The so-called knowing what it is and why it is. Also, you can type the usual 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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the

php Chinese website!

FileReader implements local preview before uploading pictures

Related articles