Usually we will be finding so many scenarios where we will be uploading different kind of documents.
With out using AJAX there will be an additional button along with ASP File Upload control.
If we use AJAX AsnycFileUpload control it is not required to use additional ASP button control.
Lets see how to work with Ajax control - AsyncFileUpload.
Introduction:
Here I will explain how to use Ajax AsyncFileUpload control to upload files to folder and show progress bar during upload files to server using asp.net
Description:
Previously we have learnt many things in the previous articles relating to Ajax. Now we will discuss on how to use ajax AsyncFileUpload control to upload files to folder in asp.net. Before proceed to implement sample we have you to install ajaxcontroltoolkit in visual studio.
It Ajax is installed then we need to follow the below steps to implement Ajax AsyncFileUpload control example in asp.net.
First create one new website after that right click on it add new folder and give name as ‘Documents’ after that add AjaxControlToolkit reference to your application and add following line in your aspx page
Find the source page as below
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="AJAX_Demo.WebForm4" %>
<%@ 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">
// This function will execute after file uploaded successfully
function uploadingComplete() {
document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File Uploaded Successfully";
}
// This function will execute if file upload fails
function uploadingError() {
document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File upload Failed.";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<Ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></Ajax:ToolkitScriptManager>
<div>
<Ajax:AsyncFileUpload ID="fileUpload1" OnClientUploadComplete="uploadingComplete" OnClientUploadError="uploadingError"
CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Modern" UploadingBackColor="#CCFFFF"
ThrobberID="imgLoad" OnUploadedComplete="fileUploadComplete" />
<br />
<asp:Image ID="imgLoad" runat="server" ImageUrl="~/images/fileisloading.gif" Height="65px" />
<br />
<asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
namespace AJAX_Demo
{
public partial class WebForm4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void fileUploadComplete(object sender, AsyncFileUploadEventArgs e)
{
string filename = System.IO.Path.GetFileName(fileUpload1.FileName);
fileUpload1.SaveAs(Server.MapPath("Documents/") + filename);
}
}
}
No comments:
Post a Comment