JavaScript Preview Image before Upload with jQuery

Today, We want to share with you JavaScript Preview Image before Upload with jQuery.In this post we will show you show image preview before upload using jquery, hear for how to display uploaded image in html using javascript we will give you demo and example for implement.In this post, we will learn about Show (Display) image preview before upload using jQuery with an example.

Free Live Chat for Any Issue

JavaScript Preview Image before Upload with jQuery

There are the Following The simple About JavaScript Preview Image before Upload with jQuery Full Information With Example and source code.

As I will cover this Post with live Working example to develop image upload with preview bootstrap, so the File upload preview image for this example is following below.

Read Also:  jquery ajax call php function with parameters

Step 1: create a html file


<!DOCTYPE html>
    <title>Client Side Image Preview -</title>
<body style="background: lightgrey">
    <img id="diplay_img" src="not-any-img.jpg" width="350px" height="320px"/><hr/>
    <input type="file" id="image" style="display: none;"/>
    <!--<input type="hidden" style="display: none" value="0" name="imgDelete" id="imgDelete">-->
    <a href="javascript:updateUserProfile()">Change</a> |
    <a style="color: red" href="javascript:imgDeleteImage()">Remove</a>
<script src=""></script>
    function updateUserProfile() {
    $('#image').change(function () {
        var imgLivePath = this.value;
        var img_extions = imgLivePath.substring(imgLivePath.lastIndexOf('.') + 1).toLowerCase();
        if (img_extions == "gif" || img_extions == "png" || img_extions == "jpg" || img_extions == "jpeg")
            alert("Please valid select your profile image file (jpg, jpeg, png).")
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
//              $("#imgDelete").val(0);
    function imgDeleteImage() {
        $('#diplay_img').attr('src', 'not-any-img.jpg');
//      $("#imgDelete").val(1);

Web Programming Tutorials Example with Demo

Read :

Read Also:  AngularJS Confirm Password Validation Example


You can also read about AngularJS, ASP.NET, VueJs, PHP.


I hope you get an idea about JavaScript Preview Image before Upload with jQuery.
I would like to have feedback on my blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.