In this article i will show you how to use ajaxfileupload control to async fileupload on server in asp.net.
For this you must needed to have ajax control toolkit in you system. For downloading ajax control toolkit check the below link
Download AjaxControlToolkitNow create a new asp.net project. Now add a new .aspx page . In this page add an AjaxFileUpload control.
After adding this control you code will look like as shown below.
After adding file upload control add an script manager on the page. So why we are using script manage, because it is used for registering the ajax controls present on the page.
You html doe will look as shown below.
Now go to you property of the AjaxFileUpload control and add an AjaxFileUpload1_UploadComplete1 event. this event will fire as used select file and click on upload button. In this event we will write code to get the file name and will save on the server and also in DB. So setting all the properties your page will look as shown below.
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="Ajax_file_upload._Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Ajax Asyncfileupload File Upload
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</h2>
<p>
Select File :
</p>
<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" ToolTip="Uplaod File"
ContextKeys="images" onuploadcomplete="AjaxFileUpload1_UploadComplete1"/>
</asp:Content>
Now create an new folder named images in you project. This folder we will used for saving the files which we are uploading.
Now come to your .cs page. and add the following code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Ajax_file_upload
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void AjaxFileUpload1_UploadComplete1(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
string filePath = MapPath("~/images/") + System.IO.Path.GetFileName(e.FileName);
// YOUR CODE TO SAVE THE FILE NAME IN DATA BASE
AjaxFileUpload1.SaveAs(filePath);
}
}
}
Now press F5 and run your application. You will get simile view as shown below.
As you select file upload button will appear.
Now click on upload event will fire on you .cs code. put a break point and check you will get the file name
Now complete the process and check your images folder you will get the file.
Final screen
________________________________
DOWNLOAD
________________________________
