Preview an image before uploading using jQuery

13 Jun, 2022
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="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">        </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="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">        </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:  
 
anikakapoor
rkbhola5
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to get the value in an input text box using jQuery ?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
jQuery | parent() & parents() with Examples
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?