2012年4月19日 星期四

AsyncFileUpload(非同步檔案上傳控制項)


非同步上傳檔案，這在現今許多網站都有這樣的需求，當畫面欄位很多時，且需要上傳較大的檔案時，不希望檔案到最後按下Submit時才開始上傳，這麼一來一瞬間資料量過大，不僅在用量尖峰時刻Server較負荷不了，當時的網路頻寬也容易吃緊，所以為什麼不能夠在使用者還在輸入資料時就在背後上傳檔案呢？於是這一類的解決方案就出現了，其實這個非同部的方式早也不是新的東西了，有第三方的元件可以達成，或有有人使用UploadPanel 配合FileUpload控制向來實作類似的效果。不過現在AJAX Control ToolKit 中提供的AsyncFileUpload 可以讓您輕易的做出這個效果。

屬性說明
CompleteBackColor上傳成功後顯示的顏色（預設為淡黃綠色lime）
ErrorBackColor上傳出錯後顯示的顏色（預設為紅red）
UploadingBackColor正在上傳時顯示的顏色（預設為白）
UploaderStyle控制項風格，有兩種選擇，Traditional ( 傳統 )和Modern ( 現代 )，默認是Traditional
PersistedStoreTypeAsyncFileUpload 是靠 iFrame 上傳到Session 沒其它選擇
PersistFile 
ThrobberID在上傳檔時顯示的控制項的id，一般是用GIF圖片

事件執行方式說明
OnClientUploadErrorClient當上傳出錯時執行
OnClientUploadStartedClient當上傳開始時執行
OnClientUploadCompleteClient當上傳完成時執行
OnUploadedCompleteServer當上傳完成時執行
OnUploadedFileErrorServer當上傳檔案出錯執行
範例：
JS
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//檔案完成事件
function ClientUploadComplete(sender, args) {
    var contentType = args.get_contentType();
    var text = args.get_length() + " bytes";
    $get("lblMsg").innerHTML = "檔案【" + args.get_fileName() + "】上傳完成，檔案大小:" + text;
}
 
//檔案錯誤事件
function ClientUploadError(sender, args) {
    var FileName = args.get_fileName();
    var ErrMessage = args.get_errorMessage();
    $get("lblMsg").innerHTML = "抱歉,檔案【" + FileName + "】上傳出錯,原因:" + ErrMessage;
}
 
//檔案開始上傳事件
function ClientUploadStarted(sender, args) {
    $get("lblMsg").innerHTML = "檔案【" + args.get_fileName() + "】正在上傳，請稍等...";
}
HTML
?
1
2
3
4
5
6
7
8
9
10
11
12
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
    <div style="padding:10px; margin:10px;">
    <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server"
            ThrobberID="imgAnimal"
            PersistFile="true"
            OnClientUploadComplete="ClientUploadComplete"
            OnClientUploadError="ClientUploadError"
            OnClientUploadStarted="ClientUploadStarted"
            OnUploadedComplete="AsyncFileUpload1_UploadedComplete"
            OnUploadedFileError="AsyncFileUpload1_UploadedFileError"/>
<asp:image id="imgAnimal" runat="server" imageurl="/images/uploading.gif" />
<asp:Label ID="lblMsg" runat="server" ClientIDMode="Static"></asp:Label></div>
C#
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
    System.Threading.Thread.Sleep(5000); //由於本機上傳速度太快，所以延遲下好看上傳時的效果   
     //取當前時間，以時間+文件名來保存上傳檔案
     DateTime dt = DateTime.Now;
    //判定是否有文件，有則保存
     if (AsyncFileUpload1.HasFile)
    {
        //設置檔案路徑和檔案名稱
         string strpath = MapPath("~/Data/") + dt.ToString("yyyyMMdd-") + e.FileName.Substring(e.FileName.LastIndexOf("\\")+1);
        //儲存檔案
         AsyncFileUpload1.SaveAs(strpath);
    }
}
上面是選取檔案後為自動儲存，如果不想這樣我們可以在頁面上放置一個button，然後等客戶按下儲存在儲存也可以。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
protected void Button1_Click(object sender, EventArgs e)
{
       byte[] b;  
       if (AsyncFileUpload1.HasFile) 
       { 
           b = AsyncFileUpload1.FileBytes; 
           SaveFile(b, Path.GetFileName(AsyncFileUpload1.FileName));  
       } 
}
 
protected bool SaveFile(byte [] b, string FileName)  
{  
    string FilePath = MapPath("~/Data/") + DateTime.Now.ToString("yyyyMMdd-") + FileName;
    try  
    {  
        FileStream f = new FileStream(FilePath, FileMode.Create);  
        BinaryWriter w = null;  
        try  
        { 
            w = new BinaryWriter(f); 
            w.Write(b); 
            w.Flush(); 
            return true; 
        } 
        finally 
        { 
            w.Close(); 
            f.Close(); 
        } 
    } 
    catch(Exception ex) 
    { 
        string message = ex.Message; 
        return false; 
    } 
}
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)