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.

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.

Also Read This πŸ‘‰   POST JSON Data via PHP curl Example

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.

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 :

Also Read This πŸ‘‰   Angular 4 Custom Alert, Prompt, And Confirm Box


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.