DEV Community

Javacodepoint
Javacodepoint

Posted on

Preview an image before uploading using jQuery

Image description

To preview or display an image before uploading it to the Server is providing the best user experience.
Here we are going to use HTML, CSS, and jQuery to develop it.

You just need to follow the below simple steps:

  1. Define the basic HTML
  2. Define the basic CSS for the HTML to apply the style
  3. Define the jQuery code to preview the image and reset

HTML

<head>
    <!-- jQuery library script import -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>  
    <h1>Preview an image before uploading using jQuery</h1>  
    <p>Upload an image file (.JPG,.JPEG,.PNG,.GIF) </p>

    <!-- input element to choose a file for uploading -->
    <input type="file" accept="image/*" id="image-upload" />
    <br>
    <!-- img element to preview or display the uploading image -->
    <img id="image-container" />
    <br>
    <button id="upload-btn" >Upload</button>
    <button id="cancel-btn" >Cancel</button>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS

/* to make everything center aligned */
body{
    text-align:center;
}

/* to set specific height and width for image preview */
#image-container{
    margin : 20px;
    height: 200px;
    width: 400px;
    background-color:#eee;
    border: 1px dashed #000;
}
Enter fullscreen mode Exit fullscreen mode

jQuery code

/* This function will call when page loaded successfully */    
$(document).ready(function(){

    /* This function will call when onchange event fired */        
    $("#image-upload").on("change",function(){

      /* Current this object refer to input element */         
      var $input = $(this);
      var reader = new FileReader(); 
      reader.onload = function(){
            $("#image-container").attr("src", reader.result);
      } 
      reader.readAsDataURL($input[0].files[0]);
    });


    /* This function will call when upload button clicked */       
    $("#upload-btn").on("click",function(){
        /* file validation logic goes here if required */     
        /* image uploading logic goes here */
        alert("Upload logic need to be write here...");

    });

    /* This function will call when cancel button clicked */       
    $("#cancel-btn").on("click",function(){
        /* Reset input element */
        $('#image-upload').val("");

        /* Clear image preview container */
        $('#image-container').attr("src","");
    });

  });
Enter fullscreen mode Exit fullscreen mode

Learn detailed explaination in article here: Preview an image before uploading using jQuery

Top comments (0)