Preview an image before Upload using jQuery Example

By Hardik Savani May 24, 2023 Category : jQuery


This tutorial will give you an example of preview image input type file jquery. I explained simply step by step javascript display preview images before upload. This article will give you a simple example of preview image before upload jquery. If you have a question about preview image before upload using jquery then I will give a simple example with a solution.

Sometimes we need to show preview of image before image upload. I mean when user will select new image from input="file" then it will display preview of image. In this example you can see before upload it will display preview using jquery.


<html lang="en">


<title>Change image on select new image from file input</title>

<script src=""></script>



<input type="file" name="file" id="profile-img">

<img src="" id="profile-img-tag" width="200px" />

<script type="text/javascript">

function readURL(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function (e) {












Tags :