ورود / ثبت نام
0
0

آپلود فایل به سرور به صورت AJAX

337 بازدید
آپلود فایل به سرور

آپلود فایل به سرور

در این مقاله نشان می دهیم که چگونه با استفاده از کنترل AsyncFileupload در Ajax Control Toolkit می توان فایل ها را به صورت آسنکرون آپلود نمود. این مثال کنترل جدید AsyncFileUpload را معرفی می کند، کنترلی که می تواند بدون postback و reload صفحه فایل ها را به صورت آسنکرون آپلود کند. با من همراه باشید …

آپلود فایل به سرور

دانلود آخرین ورژن AJAX Control Toolkit

برای دانلود آخرین ورژن کتابخانه AJAX Control Toolkit می توانید از لینک زیر استفاده نمایید.

ASP.Net AJAX Control Toolkit

اضافه کردن رفرنس به پروژه

بعد از اینکه کتابخانه AJAX Control Toolkit را دانلود کرده و از حالت فشرده خارج کردیم، رفرنس آن را به پروژه اضافه کرده و Build می کنیم.

زمانی که رفرنس را اضافه کردیم، تگ زیر را نیز به Web page خود اضافه می کنیم.

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

کار با کنترل AsyncFileUpload

بعد از اضافه کردن تگ، می توانیم کنترل AsyncFileUpload را به صورت زیر به صفحه اضافه کنیم.

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <cc1:AsyncFileUpload OnClientUploadError="uploadError"
        OnClientUploadComplete="uploadComplete" runat="server"
        ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern"
        CompleteBackColor = "White"
        UploadingBackColor="#CCFFFF"  ThrobberID="imgLoader"
        OnUploadedComplete = "FileUploadComplete"
      />
    <asp:Image ID="imgLoader" runat="server"
        ImageUrl = "~/images/loader.gif" />
    <br />
   <asp:Label ID="lblMesg" runat="server" Text=""></asp:Label>
</form>

رویدادهای کنترل AsyncFileUpload

property نوع اهمیت
onClientUploadError کلاینت زمانی رخ میدهد که آپلود فایل دچار خطا شود.
onClientUploadComplete کلاینت زمانی رخ میدهد که آپلود فایل با موفقیت انجام شود.
onUploadComplete سرور زمانی رخ میدهد که آپلود فایل با موفقیت انجام شود.

مدیریت رویداد سمت سرور

حال برای رویداد سمت سرور onUploadedcomplete می توانیم به صورت زیر عمل کنیم:

سی شارپ

protected void FileUploadComplete(object sender, EventArgs e)
{
    string filename  = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
    AsyncFileUpload1.SaveAs(Server.MapPath("Uploads/") + filename);   
}

VB.Net

Protected Sub FileUploadComplete(ByVal sender As Object, ByVal e As EventArgs)
   Dim filename As String=System.IO.Path.GetFileName(AsyncFileUpload1.FileName)
   AsyncFileUpload1.SaveAs(Server.MapPath("Uploads/") + filename)
End Sub

همان طور که مشاهده می کنید، به همان صورت که قبلا در کنترل FileUpload عمل می کردیم فایل را در فولدری با نام Upload در ریشه پروژه ذخیره کردیم.

مدیریت رویدادهای سمت کلاینت

مشابه رویدادهای سمت سرور، می توان رویدادهای سمت کلاینت را نیز به شکل زیر کنترل کرد:

<script type = "text/javascript">
    function uploadComplete(sender) {
        $get("<%=lblMesg.ClientID%>").innerHTML = "آپلود فایل با موفقیت انجام شد";
    }
 
    function uploadError(sender) {
        $get("<%=lblMesg.ClientID%>").innerHTML = "آپلود فایل با خطا مواجه شد";
    }
</script>

همان طور که می بینید، تابع uploadcomplete و uploadError را به ترتیب در رویدادهای onClientUploadComplete و onClientUploadError کنترل AsyncFileUpload فراخوانی کردیم.

براساس اینکه آپلود با موفقیت انجام شده یا خیر، رویداد مناسب فراخوانی می شود.

انیمیشن Loading

برای نمایش انیمیشن Loading، در زمان شروع آپلود باید یک کنترل image برای نمایش فایل GIF اضافه کنیم. ID مربوط به کنترل Image را باید با استفاده از ThrobberID property مربوط به کنترل AsyncFileUpload مشخص کنیم.

آپلود فایل به سرور

موفق باشید !

آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=18490
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
فاطمه زکایی
فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد آپلود فایل به سرور به صورت AJAX

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.