How to show image thumbnail before upload with jQuery

Now, i am going to Share:
How to show image thumbnail before upload with jQuery

Step 1:- Put the following code in <body></body> section.


<div id="previewimg"></div>
<input id="upload_file" class="img" name="image" type="file" />

Step 2:- Put the script code in <head></head> section.


<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">// <![CDATA[
$(function() { $("#upload_file").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 $("#previewimg").css("background-image", "url("+this.result+")"); } } }); });
// ]]></script>

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

// ]]></script>

Step 3:- Put following CSS code also in <head></head>section


<style>
#previewimg {
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>

<style>

#previewimg {

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>

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co