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

While we are working on the form, many times we might need to show a preview of an image before it gets upload on the server. Because it is the most required feature for file upload functionality. It helps the user to verify the chosen image and if it is wrong then help them to change the image before it uploads. So here is the blog, which helps you to enable a thumbnail preview of an image before uploading it. In this blog, I am going to show you the two different examples by 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 *