Showing posts with label Asp.net Preview Image. Show all posts
Showing posts with label Asp.net Preview Image. Show all posts

Thursday, February 23, 2017

Asp.net Preview Image before Upload

If you want to preview and image before its uploaded you have two options

1. Using a jQuery plugin
  There are plenty of jQuery plugins available that you can use to achieve this purpose. Here I will list some of the common plugins used.

2.Without using a jQuery plugin
  Here you can use simple jQuery as shown below.

HTML

<form id="form1" runat="server">
    <input type='file' id="imgUp" />
    <img id="preview" src="#" alt="your image" />
</form>

JavaScript

<script type="text/javascript">

 $("#imgUp").change(function(){

     var input= $(this).val();


    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#preview').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
});

 </script>

Cheers
Samitha