how to show image thumbnail while uploading using jquery
In this demo we will see how to show image thumbnail while uploading using jquery, in HTML 5 its has become very easy to show the image thumbnails or its preview to your user before upload it to the server. In this post we used jQuery to show the preview of thumbnail, not complete procedure to upload image using PHP. This post will solve most of user's problum while uploading any image to the website due to no image preview before uploading it. This All will be done without the page reloading, you can see the preview of image thumbnails.
how to show image thumbnail using jquery steps are
Lets create and index.html file
include an input type file on the page to upload the image.
<h2> How to show image thumbnail while uploading using jquery </h2>
<div id="imagePreview"></div><br>
<input id="uploadFileDiv" type="file" name="image" class="img" />
Using Jquery OnChange event of file, it will show the image preview
$(function() {
$("#uploadFile").on("change", function()
{
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
$("#imagePreviewDiv").css("background-image", "url("+this.result+")");
}
}
});
});
Styles to image preview tag
#imagePreviewDiv {
width: 250px;
height: 250px;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
}
A complete code for how to show image thumbnail using jquery
A complete code for how to show image thumbnail using jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>how to show image thumbnail while uploading using jquery </title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="chow-to-show-image-thumbnail-using-jquery" name="description" />
<meta content="answerspoint.com" name="author" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#imagePreviewDiv {
width: 250px;
height: 250px;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
}
</style>
<script type="text/javascript">
$(function() {
$("#uploadFile").on("change", function()
{
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
$("#imagePreviewDiv").css("background-image", "url("+this.result+")");
}
}
});
});
</script>
</head>
<body>
<h2> How to show image thumbnail while uploading using jquery </h2>
<div id="imagePreview"></div><br>
<input id="uploadFileDiv" type="file" name="image" class="img" />
</body>
<html>
