How to preview image before uploading with JQuery

preview image before uploading

Here in this article I will show you How to preview image before uploading with Jquery few line of code. It is best practice to preview image to user he has selected, it will avoid user mistakes of selecting different image and visually it looks good.

Basically we will have to write our code on Change event of file input. which means when ever user changes image the preview will be changes and there will be no page reload, it will happen in no time.

Click the following button to view live demo of how to preview image
Demo of Image Preview

As code is just few lines so I will include whole page code here.
txtFile is id of file input
imgPreview is id of img tag where we have to preview image
Jquery code id written at end of body tag.


    Write a Reply or Comment

    Your email address will not be published. Required fields are marked *