AJAX Update Progress with Upload Image
Hi
try this example to use AJAX Update Progress with Upload Image
1) Open VS 2005 and create new AJAX Website
2) Add new folder called “Upload” which will upload image on it
3) Add new web page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Upload Image</title>
<style type="text/css">
.Progress
{
background-color:#CF4342;
color:White;
width:105px;
}
.Progress img {
vertical-align:middle;
margin:2px;
}
.progressBackgroundFilter {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
overflow:hidden;
padding:0;
margin:0;
background-color:#000;
filter:alpha(opacity=50);
opacity:0.5;
z-index:1000;
}
.processMessage {
position:absolute;
top:30%;
left:43%;
padding:10px;
width:14%;
z-index:1001;
background-color:#fff;
}
</style>
<script language="javascript" type="text/javascript" >
//--- to validate extension of fileupload control
function ValidateFile(source, args)
{
try
{
var fileAndPath=document.getElementById(source.controltovalidate).value;
var lastPathDelimiter=fileAndPath.lastIndexOf("\\");
var fileNameOnly=fileAndPath.substring(lastPathDelimiter+1);
var file_extDelimiter=fileNameOnly.lastIndexOf(".");
var file_ext=fileNameOnly.substring(file_extDelimiter+1).toLowerCase();
if(file_ext!="jpg")
{
args.IsValid = false;
if(file_ext!="gif")
args.IsValid = false;
if(file_ext!="png")
{
args.IsValid = false;
return;
}
}
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.description + "\n\n";
txt+="Click OK to continue.\n\n";
txt+=document.getElementById(source.controltovalidate).value;
alert(txt);
}
args.IsValid = true;
}
//-- to show UpdateProgress if FileUpload has File
function showWait()
{
var isValid = Page_ClientValidate("img");
if ( isValid == true )
{
if(document.getElementById('<%=fileUp.ClientID %>').value != "")
{
$get('UpdateProgress1').style.display = 'block';
return true;
}
else
{
alert("SelectImage");
return false;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:FileUpload ID="fileUp" runat="server" />
<asp:CustomValidator ID="CustomValidator1" runat="server"
ClientValidationFunction="ValidateFile" ControlToValidate="fileUp"
Display="Dynamic" ErrorMessage="Select Image" ValidationGroup="img" ></asp:CustomValidator>
<br />
<asp:Button ID="btnAddFile" runat="server" CausesValidation="False"
onclick="btnAddFile_Click" OnClientClick="javascript:return showWait();"
Text="Add Image" ValidationGroup="img" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnAddFile" />
</Triggers>
</asp:UpdatePanel>
</div>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" >
<ProgressTemplate>
<div id="progressBackgroundFilter"></div>
<div id="processMessage" align="center">
<asp:Label ID="Label32" runat="server" Text="Loading ..." ></asp:Label><br /><br /><img src="Images/5.gif" alt="Loading" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>
4) In code behind in Button Click Event:-
protected void btnAddFile_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(1000);
//string filename = System.IO.Path.GetFileName(fileUp.FileName);
//fileUp.SaveAs(Server.MapPath("~/Upload/") + filename);
string File = Guid.NewGuid().ToString() + Path.GetExtension(fileUp.FileName);
fileUp.SaveAs(Server.MapPath("~/Upload/") + File);
}
Hope this helps
Good Luck
Categories: AJAX, ASP.Net
AJAX FileUpload, Upload Image
Yasser Zaid's Weblog 
Thank you very much. Code is very helpful.
@Mrityunjay Ravi :- you are welcome hope my post helps you