در این مقاله میخواهیم عملیات آپلود فایل یا تصویر بدون postback ، Refresh یا Reload صفحه در Asp.Net را انجام دهیم

در این مقاله میخواهیم چندین فایل و تصویر را بدون اینکه صفحه postback ، Refresh یا Reload شود آپلود کنیم.

کنترل ASP.Net AJAX Control Toolkit و AjaxFileUpload به کاربر اجازه میدهند که چندین فایل را بدون اینکه صفحه postback ، Refresh یا Reload شود آپلود کند.

قابلیت Drag and Drop در بعضی از مرورگرها پشتیبانی میشود واجازه آپلود فایل ها را با استفاده از Drag and Drop میدهند.

 آخرین ورژن AJAX Control Toolkit را از لینک زیر میتوانید تهیه نمایید:

Download ASP.Net AJAX Control Toolkit

اضافه کردن رفرنس AJAX Control Toolkit به پروژه:

بعد از دانلود کتابخانه AJAX Control Toolkit آنرا از حالت فشرده خارج نموده و رفرنس آن باید به پروژه اضافه شود و پروژه را rebuild کنید سپس باید آنرا در بالای صفحه ثبت کنیم:

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

 صفحه html شامل ToolkitScriptManager  و کنترل AjaxFileUpload  میشود که برای AjaxFileUpload خصوصیت

MaximumNumberOfFiles  رابرای جلوگیری از تعداد انتخاب های کاربر تنظیم میکنیم.

رویداد OnUploadComplete  زمانی که کاربر روی دکمه آپلود کلیک میکند اتفاق می افتد.

<asp:ToolkitScriptManager runat="server">
</asp:ToolkitScriptManager>
<asp:AjaxFileUpload ID="AjaxFileUpload11" runat="server" MaximumNumberOfFiles="5"
    Width="400px" OnUploadComplete="OnUploadComplete" />

فضا نام های زیر مورد نیاز است:

using System.IO;
using AjaxControlToolkit;

رویداد OnUploadComplete :

نام فایل فراخوانی میشود از AjaxFileUploadEventArgs و فایل توسط متد SaveAs  ذخیره میشود:

protected void OnUploadComplete(object sender, AjaxFileUploadEventArgs e)
{
    string fileName = Path.GetFileName(e.FileName);
    AjaxFileUpload11.SaveAs(Server.MapPath("~/Uploads/" + fileName));
}

تنظیمات Web.Config

شما باید بخش های System.Web  و System.WebServer از فایل web.config :

<system.webServer>
    <handlers>
        <add name="AjaxFileUploadHandler" verb="POST" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit"/>
    </handlers>
</system.webServer>