Preview an image before uploading using jQuery

Preview an image before uploading using jQuery

| |
Image Carousel

Table of Contents Contents-topics
1 Introduction
2 HTML code


Preview an image before uploading using jQuery we are going to use the JavaScript constructor FileReader() to read the image provided and then we shall display it. We have used img tag to display the image we get from the file we upload. Then we used FileReader() to get the file and then we used reader.readAsDataURL(file) to read the file as it is a image file or not.

2:HTML code

HTML code Copy

<!DOCTYPE html>
<html lang="en">
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src=""></script>
        <title>Preview an image using jQuery</title>
        <span class="heading">Developer Corner Preview an image before uploading using jQuery</span>
            <div class="holder">
                <img id="imgPreview" src="#" alt="pic" />
            <input type="file" name="photograph"
                id="photo" required="true" />
            .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;
            $(document).ready(() => {
                $("#photo").change(function () {
                    const file = this.files[0];
                    if (file) {
                        let reader = new FileReader();
                        reader.onload = function (event) {

Output of Preview an image before uploading:



Tags: preview of an image before uploading using jQuery , preview of an image using jquery , how to show image using jquery,jquery , advance jquery , jquery advance code,
0 Comments (Please let us know your query)
Leave Comment
Leave Comment
Articles from other Categories
Load More