Display preview selected image in input type file using JQuery

Display preview selected image in input type file using 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>


Leave a Reply

Your email address will not be published.

*
*
*