Display preview selected image in input type file using JQuery

By Hardik Savani | May 16, 2016 | | 206728 Viewer | Category : Javascript HTML jQuery


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>



Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.