Hi rakeshkuma,
You need to add handlers in system.webServer and httpHandlers in system.web section of Web.Config file.
Check this example. Now please take its reference and correct your code.
HTML
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function UploadFiles() {
$('.ajax__fileupload_uploadbutton').trigger('click');
}
</script>
<style type="text/css">
.ajax__fileupload {
font-family: Calibri !important;
}
.ajax__fileupload_selectFileButton {
text-align: center !important;
cursor: pointer !important;
font-weight: bold !important;
color: #fff !important;
background-color: #E17E26 !important;
border-color: #E17E26 !important;
}
.ajax__fileupload_uploadbutton {
text-align: center !important;
cursor: pointer !important;
font-weight: bold !important;
color: #fff !important;
background-color: #E17E26 !important;
border-color: #E17E26 !important;
}
/*.ajax__fileupload_footer {
display:none;
}*/
.filetype {
display: none;
}
.filesize {
display: none;
}
.uploadstatus {
display: none;
}
div .removeButton:before {
font-family: FontAwesome;
display: inline-block;
padding-right: 6px;
vertical-align: middle;
content: "\f014";
padding-bottom: 2px;
}
.removeButton {
width: 100px !important;
height: 22px !important;
}
.ajax__fileupload_queueContainer {
border: #FFF 1px solid !important;
border-top: #A9A9A9 1px solid !important;
}
.ajax__fileupload {
border: #949494 1px solid !important;
}
.ajax__fileupload_fileItemInfo {
color: #949494 !important;
margin-bottom: 0px !important;
line-height: 22px !important;
height: 22px !important;
}
.uploadstatus {
font-style: normal !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager runat="server"></ajax:ToolkitScriptManager>
<ajax:AjaxFileUpload ID="AjaxFileUpload1" runat="server" MaximumNumberOfFiles="5" Width="400px" OnUploadComplete="OnUploadComplete" />
<asp:Button OnClientClick="UploadFiles()" runat="server" ID="btnSave" OnClick="Save" Text="SAVE" />
<asp:Label runat="server" ID="lblmsg"></asp:Label>
</form>
</body>
</html>
Code
C#
protected void OnUploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
string fileName = System.IO.Path.GetFileName(e.FileName);
AjaxFileUpload1.SaveAs(Server.MapPath(("~/Uploads/" + fileName)));
}
protected void Save(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(500);
lblmsg.Text = "Save button clicked !!";
}
VB.Net
Protected Sub OnUploadComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AjaxFileUploadEventArgs)
Dim fileName As String = IO.Path.GetFileName(e.FileName)
AjaxFileUpload1.SaveAs(Server.MapPath(("~/Uploads/" + fileName)))
End Sub
Protected Sub Save(ByVal sender As Object, ByVal e As EventArgs)
System.Threading.Thread.Sleep(500)
lblmsg.Text = "Save button clicked !!"
End Sub
Web.Config
<?xml version="1.0"?>
<!--
For more information on how to configure your ASP.NET application, please visit
https://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<system.webServer>
<validation validateIntegratedModeConfiguration="false"/>
<handlers>
<add name="AjaxFileUploadHandler" verb="*" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit"/>
</handlers>
</system.webServer>
<system.web>
<httpHandlers>
<add verb="*" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit"/>
</httpHandlers>
<compilation debug="true" targetFramework="4.0" />
</system.web>
</configuration>
Screenshot
