How to Upload Files in Asp.net without Postback using Ajax File Upload Control

1.1 Ajax File Upload

In This Tutorial I will explain You how to upload multiple files or images in asp.net without postback using ajax file-upload in c#, vb.net with example or ajax file upload control in asp.net example using c# and vb.net or asynchronous file upload with progress bar using ajax file upload control in asp.net with examples.

By using ajax file-upload control we can upload multiple files or images in asp.net without reload and postback page in c# and vb.net with good example.

Before we start to implement our example the code we need to install Ajax control toolkit in our visual studio. For that we require to download the file from this URL Ajax control toolkit.

Once it downloaded the file start install it and follow the instructions which is showing in your screen automatically it will install all the controls in your visual studio. Once installation has been done ajax controls will be shown below in visual studio.

1.2 AJAX Control Toolkit

Now After Your installation done You need to create one new asp.net web application --> Now Drag and drop AjaxFileUpload control from Ajax control toolkit into your aspx page. Once we add AjaxFileUpload control our page code will be like as shown below.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Upload Files or Images in Asp.net without postback</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server"></asp:ScriptManager>
<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" Width="500px" AllowedFileTypes="jpg,jpeg,png" MaximumNumberOfFiles="4" OnUploadComplete="AjaxFileUpload1_UploadComplete" />
</div>
</form>
</body>
</html>

If you observe above AjaxFileUpload control we added multiple properties by using those properties, we can set our restrictions while uploading files.

llowedFileTypes: By using this property we can restrict type of files that need to be uploaded.

OnUploadComplete: This property will call server side event to upload files and it will raise whenever we click upload button in Ajaxfileupload control.

MaximumNumberOfFiles: By using this property we can restrict number of files that a user can added to upload queue.

Now add uploads folder to your application to upload files once finished adding folder then open code behind file and write the code like as shown below.

After completion of adding namespaces you need to write the code like as shown below.

C# Code

using System;
using System.IO;

After completion of adding namespaces you need to write the code like as shown below

protected void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
string fileName = Path.GetFileName(e.FileName);
AjaxFileUpload1.SaveAs(Server.MapPath("~/uploads/" + fileName));
}

VB.NET Code

Imports System.IO
Imports AjaxControlToolkit

Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub AjaxFileUpload1_UploadComplete(ByVal sender As Object, ByVal e As AjaxFileUploadEventArgs)
Dim fileName As String = Path.GetFileName(e.FileName)
AjaxFileUpload1.SaveAs(Server.MapPath("~/uploads/" & fileName))
End Sub
End Class

Now open web.config file add following handlers to avoid Ajax fileupload errors while uploading files.

IIS6 or Visual Studio 2010 or Earlier Versions

If you are using visual studio 2010 or IIS6 or earlier versions add following code under system.web like as shown below

<system.web>
....
<httpHandlers>
<add verb="*" path="AjaxFileUploadHandler.axd"
type="AjaxControlToolkit.AjaxFileUploadHandler,
AjaxControlToolkit"/>
</httpHandlers>
....
</system.web>

IIS7 or Visual Studio 2012 or Higher Version

If you are using visual studio 2012 or IIS7 or higher versions add following code under system.webServer like as shown below

<system.webServer>
....
<validation validateIntegratedModeConfiguration="false" />
<handlers>
<add name="AjaxFileUploadHandler" verb="*" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit"/>
</handlers>
....
</system.webServer>

Now Run Your Application And Check Your Output.

About Nikunj Satasiya

I am a passionate programmer and a Software Engineer who love developing applications in Microsoft Technologies, blogging and other related technologies like Asp.Net, VB.Net, SEO, Sql Server,My SQL,Asp.Net-MVC, LINQ, C#.Net, Stored Procedures, Ajax, JavaScript, JQuery, xml etc.

Project Plazza

How to Upload Files in Asp.net without Postback using Ajax File Upload Control

About Nikunj Satasiya

Related Post