AjaxFileUpload example

The AjaxFileUpload control also supports a drag-and-drop interface. You can add multiple files to the AjaxFileUpload upload queue by dragging the files onto the AjaxFileUpload control on a page. Alternatively, you can select multiple files to upload by using the SHIFT key or CTRL key when selecting files with the file upload dialog. These features are not supported by older browsers. 

<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1"

    ThrobberID="myThrobber"

    ContextKeys="fred"

    AllowedFileTypes="jpg,jpeg"

    MaximumNumberOfFiles=10

    runat="server"/>  

Events

 

UploadedComplete - Raised on the server when a file is uploaded successfully. In this event an instance of AjaxFileUploadEventArgs is passed in the argument that contains file name, size and content type.

Properties

ThrobberID - The ID of a control that is shown while the file is uploading. The throbber image is displayed for browsers that do not support the HTML5 File API.

ContextKeys - A dictionary that can be used to pass information to the server when a file is uploaded.

MaximumNumberOfFiles - This property enables you to limit the number of files that a user can add to the upload queue.

AllowedFileTypes - This property enables you to restrict the types of files that can be uploaded. You can assign a comma delimited list of file extensions to this property.

IsInFileUploadPostBack - This property has the value true when a page is created in response to an AjaxFileUpload asynchronous postback.

OnClientUploadComplete - The name of a JavaScript function executed in the client-side after a file is uploaded successfully.

OnClientUploadError - The name of a JavaScript function executed in the client-side if the file upload failed.

Methods

 

SaveAs(string filename) - Saves the contents of an uploaded file to the file system. Your application must have the required Write permissions. 

 Example:           

first,we create one folder in solution explorer for saving image/files .

ex.aspx:

  <asp:UpdatePanel ID="update1" runat="server"  updatemode="Conditional">                                                            

      <ContentTemplate>            

                 Attach files                                                      

              <asp:FileUpload ID="FileUpload1" runat="server"/>                                                                                                             

                   <asp:Button ID="btnfileupload" runat="server" Text="Upload" onclick="btnfileupload_Click"/><br />                                                            

                   <asp:Label ID="lblupload" runat="server" ></asp:Label><br />                                                                      

                                     

       </ContentTemplate>          

       <Triggers><asp:PostBackTrigger ControlID="btnfileupload" /></Triggers>                                                                        

  </asp:UpdatePanel>

ex.aspx.cs:

 protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {        

    //Deleting older files in "NewFolder1".

            foreach (var f in System.IO.Directory.GetFiles(Server.MapPath("~/NewFolder1")))

            System.IO.File.Delete(f);

        }

    }

 protected void btnfileupload_Click(object sender, EventArgs e)

    {

     

        if (FileUpload1.HasFile)

        {

            string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);

            string fileExtension = Path.GetExtension(FileUpload1.PostedFile.FileName);

            string fileLocation = Server.MapPath("~/NewFolder1/" + fileName);

            FileUpload1.SaveAs(fileLocation);        

  

            lblupload.Text=" file successfully uploaded";

                           

        }

    }

ajax asyncfile upload example:

ex1.aspx:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">        <ContentTemplate> 

   <asp:AsyncFileUpload  ID="AsyncFileUpload1" OnClientUploadComplete="uploadComplete" OnClientUploadError="uploadError"  runat="server" Width="400px" UploaderStyle="Modern" CompleteBackColor = "White" UploadingBackColor="#CCFFFF"  ThrobberID="Image1"OnUploadedComplete = "FileUploadComplete" BackColor="#54AB82" />         

<asp:Image ID="Image1" runat="server" ImageUrl="~/images......jpg" />    <br /> 

<asp:Label ID="lblMesg" runat="server" BackColor="#CECACD"></asp:Label>  

 </ContentTemplate>  

 </asp:UpdatePanel>
 

ex1.aspx.cs:

Code : using System;

 using System.Collections.Generic;

 using System.Linq; 

using System.Web;

 using System.Web.UI; 

using System.Web.UI.WebControls;

 public partial class _Default : System.Web.UI.Page{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void FileUploadComplete(object sender, EventArgs e)
    {
        string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
        AsyncFileUpload1.SaveAs(Server.MapPath("folder1") + filename);
    }
}