ItSolutionStuff.com

Preview an image before Upload using jQuery Example

By Hardik Savani May 24, 2023
jQuery

Hello,

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.

Example:

<html lang="en">

<head>

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

</head>

<body>


<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) {

$('#profile-img-tag').attr('src', e.target.result);

}

reader.readAsDataURL(input.files[0]);

}

}

$("#profile-img").change(function(){

readURL(this);

});

</script>


</body>

</html>

Tags: jQuery
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube