Home > AJAX, ASP.Net > AJAX Update Progress with Upload Image

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

Advertisements
  1. Mrityunjay Ravi
    July 5, 2010 at 8:42 am

    Thank you very much. Code is very helpful.

  2. yasserzaid
    July 5, 2010 at 3:24 pm

    @Mrityunjay Ravi :- you are welcome hope my post helps you

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: