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

 

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

 

事件 執行方式 說明
OnClientUploadError
Client 當上傳出錯時執行
OnClientUploadStarted
Client
當上傳開始時執行
OnClientUploadComplete
Client
當上傳完成時執行
OnUploadedComplete
Server 當上傳完成時執行
OnUploadedFileError
Server
當上傳檔案出錯執行

範例:

JS

//檔案完成事件
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

<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#

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,然後等客戶按下儲存在儲存也可以。

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

文章標籤
創作者介紹
創作者 Jimmy 的頭像
Jimmy

吉米.NET

Jimmy 發表在 痞客邦 留言(0) 人氣()