Image preview before upload with javascript & jquery

Kailash Singh

Image preview before upload with javascript & jquery

Published Jul 22,2019 by Kailash Singh

1 Comment     686 Views    

In this tutorial, we are creating a Image preview before upload with JavaScript & JQuery.


This post portrays you how to see a picture on before transferring to the server by utilizing javascript bit by bit. utilizing FileReader and jquery. 


Picture see is significant capacity while customer transfer picture. some time customer what to comprehend what picture transferring.


Step 1:- Add Link in page


<script src=""></script>


Step 2:- Add HTML Code.


<img id="preview" src="" width="350px" height="320px"/><br/>
<input type="file" id="image" style="display: none;"/>
<a href="javascript:changeProfile()">Change</a> |
<a style="color: red" href="javascript:removeImage()">Remove</a>


Step 3:- Add JavaScript & Jquery Code.



    function changeProfile() {

    $('#image').change(function () {
        var imgPath = this.value;
        var ext = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
        if (ext == "png" || ext == "jpeg" || ext == "gif" || ext == "jpg")
            alert("Please select image file ( png, jpeg,  jpg).")

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {

    function removeImage() {
        $('#preview').attr('src', 'noimage.jpg');



Hope this will help our developers.

Because we believe Mantra means CodingMantra

1 Comment

Prabhat Singh Oct 23, 2019

Thanks alot. It's Working