Today, We want to share with you JavaScript Preview Image before Upload with jQuery.In this post we will show you show image preview before upload using jquery, hear for how to display uploaded image in html using javascript we will give you demo and example for implement.In this post, we will learn about Show (Display) image preview before upload using jQuery with an example.
JavaScript Preview Image before Upload with jQuery
There are the Following The simple About JavaScript Preview Image before Upload with jQuery Full Information With Example and source code.
As I will cover this Post with live Working example to develop image upload with preview bootstrap, so the File upload preview image for this example is following below.
Step 1: create a html file
index.html
<!DOCTYPE html>
<html>
<head>
<title>Client Side Image Preview - www.pakainfo.com</title>
</head>
<body style="background: lightgrey">
<center>
<hr/><hr/><hr/>
<img id="diplay_img" src="not-any-img.jpg" width="350px" height="320px"/><hr/>
<input type="file" id="image" style="display: none;"/>
<!--<input type="hidden" style="display: none" value="0" name="imgDelete" id="imgDelete">-->
<a href="javascript:updateUserProfile()">Change</a> |
<a style="color: red" href="javascript:imgDeleteImage()">Remove</a>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function updateUserProfile() {
$('#image').click();
}
$('#image').change(function () {
var imgLivePath = this.value;
var img_extions = imgLivePath.substring(imgLivePath.lastIndexOf('.') + 1).toLowerCase();
if (img_extions == "gif" || img_extions == "png" || img_extions == "jpg" || img_extions == "jpeg")
readURL(this);
else
alert("Please valid select your profile image file (jpg, jpeg, png).")
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
$('#diplay_img').attr('src', e.target.result);
// $("#imgDelete").val(0);
};
}
}
function imgDeleteImage() {
$('#diplay_img').attr('src', 'not-any-img.jpg');
// $("#imgDelete").val(1);
}
</script>
</body>
</html>
Web Programming Tutorials Example with Demo
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about JavaScript Preview Image before Upload with jQuery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.