How to Use Ajax AsyncFileUpload in Asp.Net

Description:-

In this article will create Ajax AsyncFileUpload Control in Our Webpage to Upload File in Folder and Display after Upload. So we can Upload Image and after Upload we can see image using Ajax AsyncFileUpload Control.

Design your Webpage like below.

<div>
   <asp:ScriptManager ID="ScriptManager1" runat="server">
   </asp:ScriptManager>
   <cc1:AsyncFileUpload OnClientUploadComplete="uploadComplete" runat="server" ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern" CompleteBackColor="White" UploadingBackColor="#CCFFFF" ThrobberID="imgLoader" OnUploadedComplete="FileUploadComplete" OnClientUploadStarted="uploadStarted" />
   <asp:Image ID="imgLoader" runat="server" ImageUrl="~/images/loader.gif" />
   <br />
   <br />
   <img id="imgDisplay" alt="" src="" style="display: none" />
</div>

Now Create Script for Upload Start and Upload Complete for see Image after Upload.

<script type="text/javascript">
        function uploadStarted() {
            $get("imgDisplay").style.display = "none";
        }
        function uploadComplete(sender, args) {
            var imgDisplay = $get("imgDisplay");
            imgDisplay.src = "images/loader.gif";
            imgDisplay.style.cssText = "";
            var img = new Image();
            img.onload = function () {
                imgDisplay.style.cssText = "height:100px;width:100px";
                imgDisplay.src = img.src;
            };
            img.src = "<%=ResolveUrl(UploadFolderPath) %>" + args.get_fileName(); ;
        }
</script>

Now Generate OnUploadedComplete Property of AsyncFileUpload and Code for Save File in Folder.

protected void FileUploadComplete(object sender, EventArgs e)
{
   string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
   AsyncFileUpload1.SaveAs(Server.MapPath(this.UploadFolderPath) + filename);
}

Now run you Application and Upload File through Ajax AsyncFileUpload Control and after Upload you can see Uploaded image.

Author : Umesh Patel

Related Posts