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.

Read Also:  PHP Dynamically Add Remove Images Upload using Ajax

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

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Client Side Image Preview - www.pakainfo.com</title>
</head>
<body style="background: lightgrey">
<center>
    <hr/><hr/><hr/>
    <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>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    function updateUserProfile() {
        $('#image').click();
    }
    $('#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")
            readURL(this);
        else
            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.readAsDataURL(input.files[0]);
            reader.onload = function (e) {
                $('#diplay_img').attr('src', e.target.result);
//              $("#imgDelete").val(0);
            };
        }
    }
    function imgDeleteImage() {
        $('#diplay_img').attr('src', 'not-any-img.jpg');
//      $("#imgDelete").val(1);
    }
</script>
</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Read Also:  Simple Print PHP Hello World program From scratch

Summary

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 infinityknow.com 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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Multiple Image upload preview remove option
  2. Read Also:  Laravel Open link in new tab Example
  3. Read Also:  VueJs location redirect with parameters
  4. Read Also:  Dynamically Add Remove multiple input fields in PHP MYSQL with Jquery Ajax
  5. Read Also:  VueJS onload Function Call Example with Demo
  6. Read Also:  Dynamic breadcrumbs in Vue JS
  7. Read Also:  Create React Nested Router component
  8. Read Also:  HTML Form Enctype Multipart Attribute with Examples
  9. Read Also:  Custom Filter using Angular Example
  10. Read Also:  Display Uploaded Image Using Javascript Example
CLOSEX