Asynfileupload Controls for AJAX Control Toolkit

AJAX Control Toolkit recently has two new controls added in. You can go to the CodePlex website to download the latest version. New two controls:

1. The SeaDragon Java script Code (SJC) –SJC control uses the SeaDragon script to display a picture, which can be zoomed in and out by clicking the mouse button, where you can see its demo.

2. Asyncfileupload–ajaxcontroltool Kit finally has an AJAX control for uploading files. When the file is uploaded, a picture is displayed and the client and server side events are triggered when the picture is uploaded. You can look at its demo here.

In this article, explain how to asyncfileupload the pros and cons and how to use them.

Note: This control can only work on. NET 3.5 or later.

Advantages and Disadvantages Introduction:

asp.net upload file controls cannot use UpdatePanel. If you need to use the upload file control in UpdatePanel you must use a trigger to Postpback upload files. This FileUpload control solves previous problems and can work directly under UpdatePanel. The advantages are as follows: It can work under the update panel. It does not need postback when uploading files. It provides client and server-side de events. It can display the success of a file upload by setting a different color. For example: When uploading a successful display of green, when the failure is shown as red.

Disadvantage: Once the upload file can not be canceled. Unable to track upload progress, percent. The file is saved in the session. That is, every time you open the page, you will see the last file uploaded.

Properties and methods:

Working with Controls:

1. Register the control on the ASPX page.

<%@ Register assembly= "AjaxControlToolkit"

Namespace= "AjaxControlToolkit" tagprefix= "CC1"%>

2. Add a Asyncfileupload control.

<cc1:asyncfileupload id= "AsyncFileUpload1" width= "400px" runat= "Server"

Onclientuploaderror= "Uploaderror" onclientuploadstarted= "Startupload"

Onclientuploadcomplete= "Uploadcomplete"

Completebackcolor= "Lime" uploaderstyle= "modern"

Errorbackcolor= "Red" throbberid= "Throbber"

Onuploadedcomplete= "Asyncfileupload1_uploadedcomplete"

Uploadingbackcolor= "#66CCFF"/>

3. You can add a asynfileupload control inside or outside of the update panel. Most of the properties are already set up above. Throbber is used to display pictures that should be displayed when a file is uploaded. This is set to the label with ID throbber:

<asp:label id= "Throbber" runat= "Server" style= "Display:none" >

</asp:Label>

4. A label is also needed to show whether the file was uploaded successfully. Its display content is generated by JavaScript. This is the code that the client event executes.

<asp:label id= "lblstatus" runat= "style=" font-family:arial;

Font-size:small; " ></asp:Label>

5. Client code executed when the upload file is completed:

<script type= "Text/javascript" language= "JavaScript" >

function Uploaderror (Sender,args)

{

document.getElementById (' Lblstatus '). innertext = Args.get_filename (),

"<span style= ' color:red; ' > "+ args.get_errormessage () +" </span> ";

}

function Startupload (Sender,args)

{

document.getElementById (' Lblstatus '). innertext = ' uploading started. ';

}

function Uploadcomplete (Sender,args)

{

var filename = args.get_filename ();

var contentType = Args.get_contenttype ();

var text = "Size of" + filename + "is" + args.get_length () + "bytes";

if (Contenttype.length > 0)

{

Text + = "and content type is" + ContentType + "'.";

}

document.getElementById (' Lblstatus '). innertext = text;

}

</script>

6. Server-side code that executes when the upload file is completed:

protected void Asyncfileupload1_uploadedcomplete

(object sender, Ajaxcontroltoolkit.asyncfileuploadeventargs e)

{

System.Threading.Thread.Sleep (5000);

if (asyncfileupload1.hasfile)

{

String strpath = MapPath ("~/uploads/") + path.getfilename (e.filename);

Asyncfileupload1.saveas (strpath);

}

}