Preview image before upload using FileUpload control in ASP.Net using jQuery.


Preview image before upload using FileUpload control in ASP.Net using jQuery.


How to show an image preview when uploading images in ASP.NET using jQuery.


Source Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="test1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
      <script type="text/javascript">
          function previewFile() {
              var preview = document.querySelector('#<%=Image1.ClientID %>');
            var file = document.querySelector('#<%=FileUpload1.ClientID %>').files[0];
            var reader = new FileReader();

            reader.onloadend = function () {
                preview.src = reader.result;
            }

            if (file) {
                reader.readAsDataURL(file);
            } else {
                preview.src = "";
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" onchange="previewFile()" /><br />
        <asp:Image ID="Image1" runat="server" Height="225px" Width="225px" />
    </div>
    </form>
</body>
</html>

Output

Fig(1.1 )Now run your application and select an image from your device to upload.





Fig(1.2 )After selecting an image for your device  you can see  image on browser.


Thanks for visiting...

Share this

Related Posts

Previous
Next Post »