吉米.NET

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

範例：

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