Ajax AsyncFileUpload upload control

Ajax AsyncFileUpload upload control

Cách đây vài ngày ASP.NET Ajax team  vừa tung ra version mới cho ASP.NET Ajax toolkit, với 1 vài bản vá lổi và cũng cung cấp 2 controls mới hết sức hấp dẫn bao gồm: SeaDragon Java Script Code (SJC)  và AsyncFileUpload Control.

Trong bài này mình sẻ đề cập đến cách làm việc với AsyncFileUpload, 1 control ASP.NET upload bất đồng bộ.

Note: control này làm việc trên Net 3.5 hoặc cao hơn.

Một số đặc trưng:
Có thể được gắn bên trong ASP.NET  Update Panel.
Upload file mà không phải postback.
Cung cấp client và server code.
Tùy chọn màu cho control khi trong quá trình upload cũng như báo hiệu quá trình upload bị thất bại.
Hiển thị cái hình loading…. Khi đang upload.

Một số thuộc tính và phương thức:



CompleteBackColor: Màu nền cho control khi control upload thành công (mặc định màu chanh).
ErrorBackColor: Màu nền cho control khi control upload thất bại (mặc định màu đỏ).
UploadingBackColor: Màu nền cho control khi control đang trong khi upload tập tin.
UploaderStyle: Có 2 lựa chọn style cho control (Traditional ‘default’ và Modern).
ThrobberID: ID của control mà hiển thị khi upload, thường hiển thị hình loading….
HasFile: kiểm tra liệu control có file hay không.

Các sự kiện:
OnClientUploadError: sự kiện client, khi quá trình upload thất bại đoạn javascript chỉ định sẻ được thực thi.
OnClientUploadStarted: cũng là sự kiện client, javascript sẻ được gọi khi khi quá trình upload start, nó sẻ được gọi trước, quá trình upload bắt đầu.
OnClientUploadComplete: Nếu thành công đoạn js sẻ được thực thi.
onuploadedcomplete: server code, hàm này sẻ được thực thi khi quá trình upload hoàn tất,  nhưng nó sẻ được lưu vào session chứ chưa có lưu vào đường dẩn vật lý. Thường thì gọi hàm save file trong sự kiện này.

SaveAs() method: lưu file vào đường dẩn được chỉ định.

Ok, giờ chúng ta có thể bắt đầu.
Đầu tiên chúng ta cần phải download ajax control toolkit mới nhất.

http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=33804

Tạo 1 dự án ASP.NET C# hoặc VB.NET.

Thêm Ajax Control toolkit vào toolbox



Sauk hi kéo thả vào web page, visual studio sẻ tự động đăng ký assembly cho chúng ta

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnUploadedComplete="AsyncFileUpload1_UploadedComplete" />

    protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)

    {

        if (AsyncFileUpload1.HasFile)

        {

            string strPath = Server.MapPath("~/Uploads/") + Path.GetFileName(e.filename);

            AsyncFileUpload1.SaveAs(strPath);

        }

    }

VB.NET

    Protected Sub AsyncFileUpload1_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) Handles AsyncFileUpload1.UploadedComplete

        If AsyncFileUpload1.HasFile Then

            Dim strPath As String = Server.MapPath("~/Uploads/") + Path.GetFileName(e.filename)

            AsyncFileUpload1.SaveAs(strPath)

        End If

    End Sub

Để hiển thị trình trạng đang uploading khi user upload thì:

<asp:Image ID="Throbber" ImageUrl="~/Loading.gif" runat="server" />

<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnUploadedComplete="AsyncFileUpload1_UploadedComplete"

            ThrobberID="Throbber" />

Xong, gần như AsyncFileUpload đả làm mọi việc hết cho chúng ta.

AsyncFileUpload_Ajax.rar (1.39 mb)