Tuesday, September 25, 2012

Asynchronous File Upload to upload images in asp.net using c#

Here i will show how to use Ajax Asynchronous File Upload Control.



ASPX File :



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Asynchronous_File_Upload.Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
         <title></title>


<script type = "text/javascript">
    function uploadComplete() {
        $get("<%=lblstatus.ClientID%>").innerHTML = "File Uploaded Successfully";
    }

    function uploadError() {
        $get("<%=lblstatus.ClientID%>").innerHTML = "File upload failed.";
    }

    function uploadStarted() {
        $get("<%=lblstatus.ClientID%>").innerHTML = "File upload started.";
    }
</script>

</head>
<body>
         <form id="form1" runat="server">
         <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
         </asp:ToolkitScriptManager>
         <div>
                 <center>
                          <table>                           
                                   <tr>
                                            <td>
                                                       <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" Width="200px"
                        OnClientUploadError="uploadError"
                        OnClientUploadComplete="uploadComplete" 
                        OnClientUploadStarted="uploadStarted"
                        UploaderStyle="Modern"
                        CompleteBackColor = "LightGreen"
                        UploadingBackColor="Yellow"                          
                        ThrobberID="ThrobberImg"
                        OnUploadedComplete = "FileUploadComplete"
                        />
                        </td>
                        <td>
                                                                  
            <asp:Image runat="server" ID="ThrobberImg" ImageUrl="~/images           
            /uploadingImage.gif" AlternateText="loading" />
                                            </td>
                                   </tr>
                                   <tr>
                                   <td>
                                   <asp:Label ID="lblstatus" runat="server" 
                     Style="font-family: Arial; font-size: small;"></asp:Label>
                                   </td>
                                   </tr>
                          </table>
                 </center>
         </div>
         </form>
</body>
</html>

CodeBehind : 

        protected void FileUploadComplete(object sender, EventArgs e)
        {           
            if (AsyncFileUpload1.HasFile)
            {
                Thread.Sleep(1000);
                string strPath = MapPath("~/UploadedImages/") + 
                        Path.GetFileName(AsyncFileUpload1.FileName);
                AsyncFileUpload1.SaveAs(strPath);
            }
        }


Events
  • UploadedComplete - Fired on the server side when the file successfully uploaded
  • UploadedFileError - Fired on the server side when the uloaded file is corrupted

Properties
  • CompleteBackColor - The control's background color on upload complete. Default value - 'Lime'.
  • ContentType - Gets the MIME content type of a file sent by a client.
  • ErrorBackColor - The control's background color on upload error. Default value - 'Red'.
  • FileContent - Gets a Stream object that points to an uploaded file to prepare for reading the contents of the file.
  • FileName - Gets the name of a file on a client to upload using the control.
  • HasFile - Gets a bool value indicating whether the control contains a file.
  • OnClientUploadComplete - The name of a javascript function executed in the client-side after the file successfully uploaded
  • OnClientUploadError - The name of a javascript function executed in the client-side if the file uploading failed
  • OnClientUploadStarted - The name of a javascript function executed in the client-side on the file uploading started
  • PostedFile - Gets a HttpPostedFile object that provides access to the uploaded file.
  • ThrobberID - ID of control that is shown while the file is uploading.
  • UploaderStyle - The control's appearance style (Traditional, Modern). Default value - 'Traditional'.
  • UploadingBackColor - The control's background color when uploading is in progress. Default value - 'White'.
  • Width - The control's width (Unit). Default value - '355px'.

Methods
  • SaveAs(string filename) - Saves the contents of an uploaded file.

No comments:

Post a Comment