AJAX Control Toolkit的AsynFileUpload控制項

AJAX Control Toolkit最近有兩個新的控制項添加了進來。你可以去codeplex網站下載最新的版本。新增的兩個控制項：

1.       SeaDragon Java Script Code(SJC) – SJC控制項使用SeaDragon指令碼來顯示一個圖片，通過滑鼠的點擊按鈕可以放大和縮小圖片，你可以在這個地方看它的demo。

2.       AsyncFileUpload – ajaxcontroltool kit終於有了一個上傳檔案的ajax控制項。當上傳檔案時會有一個圖片顯示,而當圖片上傳完成時會觸發用戶端和伺服器端的事件。你可以在這裡看它的demo.

在這篇文章中說明一下如何AsyncFileUpload的優缺點和如何使用。

注意: 這個控制項只在.NET 3.5或更高版本上才能工作。

 

優缺點介紹：

Asp.net的上傳檔案控制項都不能使用updatepanel.如果你需要在updatePanel中使用上傳檔案控制項必須使用一個trigger來postpback進行上傳檔案。這個fileupload控制項解決了以前的問題，可以直接在updatepanel下工作。優點如下： 它能夠在update panel下工作。 它上傳檔案時不需要postback. 它提供用戶端和伺服器端的德事件。 它可以通過設定不同的顏色來顯示檔案上傳是否成功。比如：上傳成功時顯示綠色，失敗時顯示為紅色。

 

缺點： 一旦開始上傳檔案無法取消。 無法跟蹤上傳進度，百分比。 檔案儲存在session中。也就是說每次開啟頁面都會顯示上次上傳的最後那個檔案的資訊。

 

屬性和方法：

 

使用控制項:

 

1.       在aspx頁面註冊控制項。

   <%@ Register Assembly="AjaxControlToolkit"

Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

2.       添加一個AsyncFileUpload控制項。

<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.       可以在update panel裡面或外面添加一個AsynFileUpload控制項。大部分屬性已經在上面設定完成。Throbber用來顯示檔案上傳時應該顯示的圖片。這裡設定為ID為Throbber的label：

<asp:Label ID="Throbber" runat="server" Style="display: none">

<img src="Images/indicator.gif" align="absmiddle" alt="loading" />

</asp:Label>

4.       這裡還需要一個label來顯示檔案最終是否上傳成功。它的顯示內容由javascript來產生。也就是用戶端事件執行的代碼。

<asp:Label ID="lblStatus" runat="server" Style="font-family: Arial;

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

5.       當上傳檔案完成時執行的用戶端代碼：

    <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.       當上傳檔案完成時執行的伺服器端代碼：

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);

  }

}