Image Preview Before Upload By Using JS

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
Written By : Web Development Institute
Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing Expert Course

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 25 Days

Crash : 15 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 6 Months

Fastrack : 4 Months

Crash : 2 Months

Web Expert with Python

Regular : 12 Months

Fastrack : 6 Months

Crash : 3 Months

Related Blogs

Request For Demo