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> |
Step 3:- Put following CSS…
Expand +