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 I explained many articles relating to Ajax. Now I will explain how to use ajax AsyncFileUpload control to upload files to folder in asp.net. Before proceed to implement sample have you install ajaxcontroltoolkit in visual studio or not if not install it otherwise if you already done then follow the below steps to implement Ajax AsyncFileUpload control example in asp.net.
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 I explained many articles relating to Ajax. Now I will explain how to use ajax AsyncFileUpload control to upload files to folder in asp.net. Before proceed to implement sample have you install ajaxcontroltoolkit in visual studio or not if not install it otherwise if you already done then 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 ‘Files’ after that add AjaxControlToolkit reference to your application and add following line in your aspx page
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
Once add above references design your aspx page will be likes this
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
// This function will execute after file uploaded successfully
function uploadComplete() {
document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File Uploaded Successfully";
}
// This function will execute if file upload fails
function uploadError() {
document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File upload Failed.";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="scriptManager1" runat="server"/>
<div>
<ajax:AsyncFileUpload ID="fileUpload1" OnClientUploadComplete="uploadComplete"OnClientUploadError="uploadError"
CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Modern"UploadingBackColor="#CCFFFF"
ThrobberID="imgLoad" OnUploadedComplete="fileUploadComplete" /><br />
<asp:Image ID="imgLoad" runat="server" ImageUrl="loading.gif" />
<br />
<asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
</div>
</form>
</body>
</html>
|
If you observe above code I define lot of properties to ajax:AsyncFileUpload now I will explain all the properties of Ajax fileupload control
OnClientUploadComplete – This property is used to execute the client side JavaScript function after file successfully uploaded.
OnClientUploadError – This property is used to execute the client side JavaScript function if file uploading failed.
OnClientUploadStarted – This property is used to execute the client side JavaScript function whenver file uploading start.
CompleteBackColor – This property is used to set fileupload control background after file upload complete its default value ‘Lime’.
ErrorBackColor – This property is used to set fileupload control background if file upload failed its default value ‘Red’.
UploadingBackColor – This property is the id of the control which is seen during upload file.
UploaderStyle – This property is used to set fileupload control appearance style either Modern orTraditional. By default its value "Traditional".
ThrobberID – ID of control that is shown while the file is uploading.
Width – This property is used to set width of the control. By default its value ‘355px’
Now in code behind add following namespaces
C# Code
using System;
using System.Web.UI;
using AjaxControlToolkit;
|
After completion of adding namespaces write following code in code behind
protected void fileUploadComplete(object sender, AsyncFileUploadEventArgs e)
{
string filename = System.IO.Path.GetFileName(fileUpload1.FileName);
fileUpload1.SaveAs(Server.MapPath("Files/") + filename);
}
|
VB Code
Imports System.Web.UI
Imports AjaxControlToolkit
Partial Class Default
Inherits System.Web.UI.Page
Protected Sub fileUploadComplete(ByVal sender As Object, ByVal e As AsyncFileUploadEventArgs)
Dim filename As String = System.IO.Path.GetFileName(fileUpload1.FileName)
fileUpload1.SaveAs(Server.MapPath("Files/") & filename)
End Sub
End Class
|
Demo
 |
Download sample code attached
.png)
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.