This is simple jquery concept to preview the uploading image while upload. This also important because this is one of the verification while uploading correct image or not. So the user get to know the uploading image correct or not.
This simple method used to get the image path from input field and display it. Fist i define the image display:none; and when onload i given display:block for preview the image. It used to display image using before upload.The below example shows you to how to preview image while upload.Download the code and use it and demo also available check it below. I hope this article helps you...
This simple method used to get the image path from input field and display it. Fist i define the image display:none; and when onload i given display:block for preview the image. It used to display image using before upload.The below example shows you to how to preview image while upload.Download the code and use it and demo also available check it below. I hope this article helps you...
Full code for preview image while uploading:
<html>
<head>
<title>preview image when upload the image</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.san{
margin-top:20px;
}
input[type="file"]{
background-color: #4CAF50;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}
</style>
</head>
<body>
<input type="file" id="img-path" name="file" accept="image/*">
<div class="san" >
<img id="sample_photo" src="#" alt="image" style="width:370px;height:auto; display:none;">
</div>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#sample_photo')
.attr('src', e.target.result)
.width(370)
.height('auto');
document.getElementById("sample_photo").style.display = "block";
};
reader.readAsDataURL(input.files[0]);
}
}
$("#img-path").change(function() {
readURL(this);
});
</script>
</body>
</html>
0 Comments