Display image in ASP

Question

I have file upload control I want when I choose image then want to display in ASP panel through jQuery how to do this

<div id="crop-header">
   <asp:FileUpload CssClass="cropit-image-input" ID="fileUpEx" runat="server" Width="100%" />
</div>

<asp:Panel ID="pnlCrop" runat="server" CssClass="cropit-preview">                     
</asp:Panel>

</div>

Any solution?

Answer 1

You can use the FileReader for that.

<asp:FileUpload ID="FileUpload1" runat="server" accept=".bmp,.gif,.jpg,.jpeg,.png" />

<img id="imagePreview" class="imagePreview" style="max-height: 100px; display: none" />

<script type="text/javascript">
    $("#<%=FileUpload1.ClientID %>").change(function () {
        showImagePreview(this);
    });

    function showImagePreview(control) {
        if (control.files && control.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#imagePreview').attr('src', e.target.result);
                $("#imagePreview").show();
            }
            reader.readAsDataURL(control.files[0]);
        }
    }
</script>