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>

 

 

    Facebook Share