Here i have explained how to use AsyncFileUpload control and how to clear it (file upload control) if the file is uploaded using Ajax in Asp.Net C#.

HTML Markup

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head id="Head1" runat="server">
<title>Ajax Clear AsyncFileUpload Control</title>
<script type="text/javascript">
    // This function will execute and clear fileupload control after file uploaded successfully 
    function uploadComplete() {
        document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File uploaded successfully";
        var uploadText = document.getElementById('<%=fileUpload1.ClientID %>').getElementsByTagName("input");
        for (var i = 0; i < uploadText.length; i++) {
            if (uploadText[i].type == 'text') {
                uploadText[i].value = '';
    // This function will execute if file upload fails
    function uploadError() {
        document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File upload failed.";
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="scriptManager1" runat="server"/>
<ajax:AsyncFileUpload ID="fileUpload1" OnClientUploadComplete="uploadComplete" OnClientUploadError="uploadError" 
CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Modern" UploadingBackColor="LightGray" 
ThrobberID="imgLoad" OnUploadedComplete="fileUploadComplete" />
<br />
<asp:Image ID="imgLoad" runat="server" ImageUrl="loading.gif" />
<br />
<asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>

Import Namespaces

using System;
using System.Threading;
using System.Web.UI;
using AjaxControlToolkit;


 protected void fileUploadComplete(object sender, AsyncFileUploadEventArgs e)
        string filename = System.IO.Path.GetFileName(fileUpload1.FileName);
        fileUpload1.SaveAs(Server.MapPath("Files/") + filename);


Add Comments