Hello friends,

Today we learn how we can display a image before uploading using jquery. For this we will take a input field of file type and a image tag as follows:

<input type="file" id="demo" />
<img id="demoimage" />

After that we will write Javascript which will read the image and will dipslay it by assigning it to image tag as follows:

document.getElementById("demo").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("demoimage").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

So this way you can simply display your image without uploading