Previous
Next

How to Preview or show an image before uploaded

do you want to show image on your website How to Preview or show an image before uploaded so you need to implement Javascript in your web page then got preview on your website.

How to Preview or show an image before uploaded

You can Implement this code in asp.net of php web application.

First Step:

You Need to put this code in Under Your Head Tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Second Step

Under body Tag you need to place this code right now.

<form runat="server">
  <input type='file' id="fileuploadID" />
  <img id="imgTagId" src="#" alt="your image" />
</form>

Third Step

Before closing body tag place this code

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

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

Final Step

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<form runat="server">
  <input type='file' id="fileuploadID" />
  <img id="imgTagId" src="#" alt="your image" />
</form>

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

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

 

Previous
Next