![\"How](\"https:\/\/images.phpgang.com\/2014\/03\/jquery-show-image-thumbnail.png\")
<\/p>\nToday I am going to show you how to show image thumbnail before uploading image with jQuery, we wrote many tutorials on image upload on PHPGang.com. If you want to give your users an option that they can see image preview before uploading that image to server then you must use this script. We used jQuery to show you preview of thumbnail not complete procedure to upload image using PHP you can read our previous tutorial for upload image to server.<\/p>\n
<\/p>\n
Read More about Image Upload:<\/strong><\/p>\n
How to Upload multiple images jQuery Ajax using PHP
\n<\/a><\/p>\nHow to Upload Image using jQuery with progress in PHP
\n<\/a><\/p>\nFile uploading with PHP<\/a><\/p>\n<\/blockquote>\n
jQuery:<\/strong><\/p>\n
<script type=\"text\/javascript\">\r\n$(function() {\r\n $(\"#uploadFile\").on(\"change\", function()\r\n {\r\n var files = !!this.files ? this.files : [];\r\n if (!files.length || !window.FileReader) return; \/\/ no file selected, or no FileReader support\r\n\r\n if (\/^image\/.test( files[0].type)){ \/\/ only image file\r\n var reader = new FileReader(); \/\/ instance of the FileReader\r\n reader.readAsDataURL(files[0]); \/\/ read the local file\r\n\r\n reader.onloadend = function(){ \/\/ set image data as background of div\r\n $(\"#imagePreview\").css(\"background-image\", \"url(\"+this.result+\")\");\r\n }\r\n }\r\n });\r\n});\r\n<\/script><\/pre>\nAbove jQuery work on onChange<\/em> event of your file upload field and add image in background of give div.<\/p>\n
HTML:<\/strong><\/p>\n
<div id=\"imagePreview\"><\/div>\r\n<input id=\"uploadFile\" type=\"file\" name=\"image\" class=\"img\" \/><\/pre>\nCSS used for image div in which we preview thumbnail:<\/strong><\/p>\n
<style>\r\n#imagePreview {\r\n width: 180px;\r\n height: 180px;\r\n background-position: center center;\r\n background-size: cover;\r\n -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);\r\n display: inline-block;\r\n}\r\n<\/style><\/pre>\nThat’s all:<\/strong><\/p>\n
[wpdm_file id=88]DEMO<\/a><\/div>\nSo that’s how you can show image thumbnail before uploading image,I hope you like this tutorial please don’t forget to give us your feedback in comments, you can also download code for free and test it on our demo page.<\/p>\n
![\"jQuery\"](\"http:\/\/images.phpgang.com\/cat\/38.png\")
<\/a><\/div><\/div>","protected":false},"excerpt":{"rendered":"