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 anxiety 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

Lets create and index.html file
include an browse button 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="uploadFile" type="file" name="image" class="img" />

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
				$("#imagePreview").css("background-image", "url("+this.result+")");
			}
		}
	});
});

Apply styles to image preview tag

#imagePreview {
width: 180px;
height: 180px;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
}

After combining all the code together it will become as follows

<!DOCTYPE html>
<html lang="en"> 
	<head>
		<meta charset="utf-8" />
		<title>how-to-show-image-thumbnail-using-jquery| livescript.in DEMO  </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="livescript.in" name="author" />
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		
		<style>
			#imagePreview {
				width: 180px;
				height: 180px;
				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
						$("#imagePreview").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="uploadFile" type="file" name="image" class="img" />
</body>
<html>

DEMO

 

Print Friendly, PDF & Email

Leave a Reply

Your email address will not be published. Required fields are marked *