Show Preview of an Image Before Uploading It Using jQuery and JavaScript

Sometimes we might need to show a preview of an image before it upload. Because it is a most required feature for file upload functionality. It helps the user to verify chosen image and if it is wrong then change the image before it upload. In this blog, we will show you how to enable a thumbnail preview of an image before uploading it using jQuery and JavaScript.

Example with Javascript:

Here is the example code to show preview of an image using HTML and Javasript,

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #image_preview { max-width: 200px; max-height: 200px; display: block; }
        </style>
        <script type="text/javascript">
            function ImagePreview() {
                var ImagePreview = document.getElementById('image_preview');
                var UploadFile = document.getElementById('file_to_upload').files[0];
                var ReaderObj = new FileReader();
                ReaderObj.onloadend = function () {
                    ImagePreview.src = ReaderObj.result;
                }
 
                if (UploadFile) {
                    ReaderObj.readAsDataURL(UploadFile);
                } else {
                    ImagePreview.src = '';
                }
            }
        </script>
    </head>
    <body>
        <form action="upload.php" method="post" enctype="multipart/form-data">
            Select image to upload:
            <img id="image_preview" src="" alt="Preview Image">
            <input type="file" id="file_to_upload" name="file_to_upload" onchange="ImagePreview()" />
            <input type="submit" value="Upload Image" name="submit">
        </form>
    </body>
</html>

Example with jQuery:

Here is the example code to show a preview of an image using HTML and jQuery,

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #image_preview { max-width: 200px; max-height: 200px; display: block; }
        </style>
 
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript">
            $( document ).ready(function() {
                $("#file_to_upload").on("change", function(){
                    var files = !!this.files ? this.files : [];
                    if (!files.length || !window.FileReader) return;
 
                    if (/^image/.test( files[0].type)){ // Allow only image upload
                        var ReaderObj = new FileReader(); // Create instance of the FileReader
                        ReaderObj.readAsDataURL(files[0]); // read the file uploaded
                        ReaderObj.onloadend = function(){
                            $("#image_preview").attr('src', this.result);
                        }
                    }else{
                        alert("Upload an image");
                    }
                });
            });
        </script>
    </head>
    <body>
        <form action="upload.php" method="post" enctype="multipart/form-data">
            Select image to upload:
            <img id="image_preview" src="" alt="Preview Image">
            <input type="file" id="file_to_upload" name="file_to_upload" />
            <input type="submit" value="Upload Image" name="submit">
        </form>
    </body>
</html>

Hope this helps you.

Leave a Reply

Your email address will not be published. Required fields are marked *