Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

How to show image thumbnail before upload with jQuery

If you want to show image thumbnail before you upload image. Suppose you are using input type "file" in PHP and you want to show image which one is selected than you can use this simple solution.

Demo

Step1: Add following line of code in your file

<form id="myform">
         <input type='file' onchange="showImage(this);" /> 
         <img id="imagepreview" src="" alt="your image" /> 
</form>

Step2: Add following script in same page

<script type="text/javascript">
function showImage(input) { 
         if (input.files && input.files[0]) { 
         var reader = new FileReader(); 
         reader.onload = function (e) { 
                 $('#imagepreview').attr('src', e.target.result); 
         }
         reader.readAsDataURL(input.files[0]); 
      } 
  } 
</script>

Demo

Please support us, Like us on Facebook.

0 comments:

Post a Comment

 

Copyright @ 2017 HKBlog.