How to Use Ajax AsyncFileUpload With Validation 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. Here we will Use Validation for FileUploadedSuccessFully or Upload Fail.

Default.aspx:-

<div>
  <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <cc1:AsyncFileUpload OnClientUploadError="uploadError" OnClientUploadComplete="uploadComplete" runat="server" 
          ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern" CompleteBackColor="White" UploadingBackColor="#CCFFFF" 
          ThrobberID="imgLoader" OnUploadedComplete="FileUploadComplete" />
    <asp:Image ID="imgLoader" runat="server" ImageUrl="~/images/loader.gif" />
    <br />
    <asp:Label ID="lblMesg" runat="server" Text=""></asp:Label>
</div>

JavaScript:-
Now Create Script for Upload Error and Upload Complete for see Image after Upload for Validation.

<script type="text/javascript">
  function uploadComplete(sender) {
     $get("<%=lblMesg.ClientID%>").style.color = "green";
     $get("<%=lblMesg.ClientID%>").innerHTML = "File Uploaded Successfully";
  }

  function uploadError(sender) {
     $get("<%=lblMesg.ClientID%>").style.color = "red";
     $get("<%=lblMesg.ClientID%>").innerHTML = "File upload failed.";
  }
</script>

Register Ajaxcontroltoolkit in your webpage.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Now run you Application and Upload File through Ajax AsyncFileUpload Control and after Upload you can see Uploaded image with Successfully Validation and after Select another image and Upload it will gives you error..

Author : Umesh Patel

Related Posts