How to use FileReader in JS to implement local preview function before uploading pictures-JS Tutorial-php.cn

How to use FileReader in JS to implement local preview function before uploading pictures

亚连

Release： 2018-06-02 09:52:02

Original

1860 people have browsed it

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. This article will introduce to you the use of FileReader in JS to realize the local preview function before uploading pictures. Friends who need it can refer to the introduction

What I usually do When uploading and previewing images, if there are no special requirements, just upload the image directly to the background. After success, get the URL and then render it on the page. This will not cause any problem when the image is relatively small. If it is larger, it will be slower to view. It’s time to preview, and junk files are generated, so it’s 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, and then I accidentally discovered the implementation on the computer desktop. demo, and then checked the API based on the demo, and summarized it briefly:

First you have to get the File object

When uploading images 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 a web application to asynchronously read the contents of a file (or raw data buffer) stored on the user's computer, specified using a File or Blob object The file or data to be read.

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

var freader = new FileReader();

Copy after login

Use the readAsDataURL() method to read the specified content

freader.readAsDataURL(file);

Copy after login

The last thing 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(&#39;src&#39;, e.target.result); }

Copy after login

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(&#39;myImg&#39;);
 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>

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to learn the process and child_process modules in node (detailed tutorial)

Through jQuery JSONP Domain request method (detailed tutorial)

By implementing http request and loading display in Vue2.0

The above is the detailed content of How to use FileReader in JS to implement local preview function before uploading pictures. For more information, please follow other related articles on the PHP Chinese website!