In this article I will explain with example, how to upload multiple files and images without Page PostBack, Refresh or Reload in ASP.Net using C# and VB.Net.
The ASP.Net AJAX Control Toolkit AjaxFileUpload control user to upload multiple files and images without page PostBack, Refresh or Reload.
Drag and Drop functionality is supported only in browsers that allow upload of files using Drag and Drop.
Download latest AJAX Control Toolkit
You can download the latest AJAX Control Toolkit library use the link below.
Adding reference of AJAX Control Toolkit to your project
Once you downloaded the AJAX Control Toolkit library, unzip it and add its reference in your website project and build it. Once the reference is added, register the AJAX Control Toolkit by adding the following tag.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
Note: You can also add AJAX Control Toolkit control’s to your Visual Studio ToolBox, for more details refer my following article.
HTML Markup
The HTML Markup consists of ToolkitScriptManager and ASP.Net AJAX Control Toolkit AjaxFileUpload control.
MaximumNumberOfFiles property - The MaximumNumberOfFiles property will prevent user to select more than the specified file for upload.
OnUploadComplete event - The OnUploadComplete event will be raised when the Upload button of the AjaxFileUpload control is clicked.
<asp:ToolkitScriptManager runat="server">
</asp:ToolkitScriptManager>
<asp:AjaxFileUpload ID="AjaxFileUpload11" runat="server" MaximumNumberOfFiles="5"
Width="400px" OnUploadComplete="OnUploadComplete" />
Namespaces
You will need to import the following namespaces.
C#
using System.IO;
using AjaxControlToolkit;
VB.Net
Imports System.IO
Imports AjaxControlToolkit
The OnUploadComplete event handler
The following event handler is raised when the file upload is completed. The name of the file is fetched from the AjaxFileUploadEventArgs event argument and the file is saved using the SaveAs method of the ASP.Net AJAX Control Toolkit AjaxFileUpload control.
C#
protected void OnUploadComplete(object sender, AjaxFileUploadEventArgs e)
{
string fileName = Path.GetFileName(e.FileName);
AjaxFileUpload11.SaveAs(Server.MapPath("~/Uploads/" + fileName));
}
VB.Net
Protected Sub OnUploadComplete(sender As Object, e As AjaxFileUploadEventArgs)
Dim fileName As String = Path.GetFileName(e.FileName)
AjaxFileUpload1.SaveAs(Server.MapPath("~/Uploads/" & fileName))
End Sub
Web.Config Configuration
You will need to add the following Handlers to the System.Web and System.WebServer sections of the Web.Config file.
IIS6 or earlier and Visual Studio 2010 or earlier
<system.web>
<httpHandlers>
<add verb="*POST" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit"/>
</httpHandlers>
</system.web>
IIS7 or higher and Visual Studio 2012 or higher
<system.webServer>
<handlers>
<add name="AjaxFileUploadHandler" verb="POST" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit"/>
</handlers>
</system.webServer>
Screenshot
Downloads