How to use the FileReader() constructor function In JQuery

Using the createObjectURL() method

The FileReader() constructor function can be used to get the URL of the uploaded image that can be later replaced or assigned to the src of the img tag on the web page to show preview.

Syntax:

const reader = new FileReader();
reader.onload(()=>{});

Example: The below example explains the practical use of the FileReader constructor to preview the uploaded image.

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>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer">
    </script>
 
    <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>
    <center>
        <span class="heading">Geeks For Geeks</span>
        <form id="myForm">
            <div class="holder">
                <img
                    id="imgPreview"
                    src="#" alt="pic" />
            </div>
            <input
                type="file"
                name="photograph"
                id="photo"
                required="true" />
            <input type="button"
                   id="formBtn"
                   value="Upload Image">
        </form>
    </center>
    <script>
        $(document).ready(() => {
            const photoInp = $("#photo");
            let file;
 
            $('#formBtn').click((e)=>{
                e.preventDefault();
                if(file){
                    alert("The image is uploaded successfully!!");
                }
                else{
                    alert("Please select a Image first!!");
                }
                 
            });
 
            photoInp.change(function (e) {
                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:

Preview an image before uploading using jQuery

In this article, we are going to discuss how we can preview an image before uploading it using jQuery. There are two different ways of achieving this task as listed below:

Table of Content

Using the FileReader() constructor function
Using the createObjectURL() method

Tags:

#CSS-Misc #HTML-Misc #JavaScript-Misc #JQuery #Web Technologies

Using the createObjectURL() method

How to use the FileReader() constructor function In JQuery

Syntax:

html

Preview an image before uploading using jQuery

Similar Reads

Contact Us