Preview an image before uploading using jQuery
In this article, we are going to discuss two methods to preview an image that is taken as input through a form. We are going to use the JavaScript constructor FileReader() to read the image provided and then we shall display it.
Example: Let us see the HTML structure with the CSS styling.
html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Geeks</title> <style> .holder { height: 300px; width: 300px; border: 2px solid black; } img { max-width: 300px; max-height: 300px; min-width: 300px; min-height: 300px; } input[type="file"] { margin-top: 5px; } .heading { font-family: Montserrat; font-size: 45px; color: green; } </style> </head> <body> <script src= </script> <span class="heading">Geeks For Geeks</span> <form> <div class="holder"> <img id="imgPreview" src="#" alt="pic" /> </div> <input type="file" name="photograph" id="photo" required="true" /> </form> </body></html> |
We have two main elements that we will interact with using JavaScript. First, we have a division element that contains the “img” tag. Using Jquery, we will change the “src” attribute of the “img” tag on upload to preview the image. The second element is the “input” tag. It is essential to specify type = “file” in this context.
Output:
Javascript code:
javascript
$(document).ready(()=>{ $('#photo').change(function(){ const file = this.files[0]; console.log(file); if (file){ let reader = new FileReader(); reader.onload = function(event){ console.log(event.target.result); $('#imgPreview').attr('src', event.target.result); } reader.readAsDataURL(file); } }); }); |
Explanation:
- FileReader(): FileReader() is a constructor used to create a FileReader object(instance of class) which helps us perform operations such as asynchronous reading raw data buffers or files. File or Blob objects are used to designate the type of data to read. In this case, the variable reader is the object which we use to perform the required operations.
- reader.readAsDataURL: The File or Blob after upload is converted into a data:URL which holds the base64 encoded string representing the data in the Blob or the File. This “data:URL” is stored in the result attribute, which can be accessed through event.target.result.
- reader.onload: The reader.onload function contains an event handler which is fired when the reader is successfully loaded. This is an asynchronous action, hence the subsequent code is executed even before load is complete. Once the load is successful , we use event.target.result to access the “DataURL” formed and we insert it in the src attribute. This way can preview the image.
Final code:
html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Geeks</title> </head> <body> <script src= </script> <span class="heading">Geeks For Geeks</span> <form> <div class="holder"> <img id="imgPreview" src="#" alt="pic" /> </div> <input type="file" name="photograph" id="photo" required="true" /> </form> <style> .holder { height: 300px; width: 300px; border: 2px solid black; } img { max-width: 300px; max-height: 300px; min-width: 300px; min-height: 300px; } input[type="file"] { margin-top: 5px; } .heading { font-family: Montserrat; font-size: 45px; color: green; } </style> <script> $(document).ready(() => { $("#photo").change(function () { const file = this.files[0]; if (file) { let reader = new FileReader(); reader.onload = function (event) { $("#imgPreview") .attr("src", event.target.result); }; reader.readAsDataURL(file); } }); }); </script> </body></html> |
Output:
Please Login to comment...