AsyncFileUpload is a new ASP.NET AJAX Control (Ajax Control Toolkit (v 3.0.30930) released for .NET 3.5 SP1) that allows you asynchronously upload files to server. You don’t need a separate upload button for this control. Add the AsyncFileUpload control and a label to the web form for the uploading and displaying messages respectively. HTML:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" CompleteBackColor="White"
OnUploadedComplete="AsyncFileUpload1_UploadedComplete" OnUploadedFileError="AsyncFileUpload1_UploadedFileError"
OnClientUploadComplete="Success" OnClientUploadError="Error" />
<asp:Label ID="Label1" runat="server"></asp:Label>
Server side events:
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
//Fired on the server side when the file successfully uploaded
if (AsyncFileUpload1.HasFile)
{
AsyncFileUpload1.SaveAs(@"C:\Images\" + AsyncFileUpload1.FileName );
Label1.Text = "Received " + AsyncFileUpload1.FileName + " Content Type " + AsyncFileUpload1.PostedFile.ContentType ;
}
}
protected void AsyncFileUpload1_UploadedFileError(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
//Fired on the server side when the loaded file is corrupted
//Display some error message here
}
Client side events:
OnClientUploadError - The name of a javascript function executed in the client-side if the file uploading failed
OnClientUploadComplete - The name of a javascript function executed in the client-side on the file uploading completed
function Success() {
document.getElementById("Label1").innerHTML = "File Uploaded Successfully !!";
}
function Error() {
document.getElementById("Label1").innerHTML = "File upload failed";
}
We can use OnClientUploadComplete to clear fileupload control selction,
function Success() {
document.getElementById ("Label1").innerHTML = "File Uploaded Successfully !!";
var fu = document.getElementById("AsyncFileUpload1");
document.getElementById("AsyncFileUpload1").innerHTML = fu.innerHTML;
}
Reference: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AsyncFileUpload/AsyncFileUpload.aspx