DEV Community

Javacodepoint
Javacodepoint

Posted on

2 2

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

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay