Image Preview Before Upload By Using JS

Solution: Sometimes there is a need to preview an image before uploading in website examples in college registration form signature upload, in govt exam form documents upload like Adhar card, address proof, photo of the person, we can do this easily by using js code, here is the solution for you

Step1 :  Write the following HTML code

<img id="avtar" style="height: 80px;" src="images/abc.jpg" alt="" />
<input id="avtarbtn" class="form-control" type="file" name="docpic" value="" />

Step2 : Paste the following script at the end of the body tag

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

$("#avtarbtn").change(function() {
readURL(this);
});
</script>

Categories: web designing javascript