آموزش آپلود چند فایل همزمان با استفاده از جی کوئری Ajax و هندلر در Asp.Net
0 0

آموزش آپلود چند فایل همزمان با استفاده از جی کوئری Ajax و هندلر در Asp.Net


آموزش آپلود چند فایل همزمان با استفاده از جی کوئری Ajax و هندلر در Asp.Net

در این پست میخواهیم نحوه آپلود چندین فایل همزمان روی صفحه با استفاده از جی گوئری Ajax و هندلر عمومی در Asp.Net را با سی شارپ آموزش دهیم.

گاهی پیش می آید که به جای اینکه بخواهیم یک فایل را بارگذاری کنیم روی وب سایت چندین فایل را بخواهیم همزمان انجام بدهیم که هم صرفه در وقت و هم صرفه در مراحل انجام کار میباشد. امروز چگونگی پیاده سازی این روش را در Asp.Net با استفاده از Ajax و هندلر عمومی با هم بررسی میکنیم.

ابتدا یک پروژه از نوع Asp ایجاد میکنیم . سپس دو فرم ایجاد میکنیم یکی با نام AutoUpload این فرم به گونه ای میخواهیم کد نویسی کنیم که به صورت اتوماتیک فایل های انتخابی بارگذاری شود و فرم دیگری با نام TriggerUpload که این فرم نحوه بارگذاری به صورت دستور اغاز توسط کاربر خواهد بود.

برای هردو فرم یک آپلودر در نظر میگیریم به صورت زیر


<div style = "padding:40px">
   <asp:FileUpload ID="FileUpload1" runat="server" />
</div>

سپس برای فرمی که به صورت بارگذاری اتوماتیک در نظر گرفتیم کد اسکریپت زیر را وارد میکنیم.


<script type = "text/javascript">

$(window).load(

    function() {

    $("#<%=FileUpload1.ClientID %>").fileUpload({

        'uploader': 'scripts/uploader.swf',

        'cancelImg': 'images/cancel.png',

        'buttonText': 'Browse Files',

        'script': 'Upload.ashx',

        'folder': 'uploads',

        'fileDesc': 'Image Files',

        'fileExt': '*.jpg;*.jpeg;*.gif;*.png',

        'multi': true,

        'auto': true

    });

   }

);

</script> 

نکته : توسط multi ایجاد بارگذاری همزمان چندین فایل را فعال کردیم و توسط auto بارگذاری خودکار را فعال کردیم.

برای فرمی که به صورت غیر اتومات در نظر گرفتیم هم اسکریپت زیر را مینویسیم.


<script type = "text/javascript">
$(window).load(
    function() {
        $("#<%=FileUpload1.ClientID%>").fileUpload({
        'uploader': 'scripts/uploader.swf',
        'cancelImg': 'images/cancel.png',
        'buttonText': 'Browse Files',
        'script': 'Upload.ashx',
        'folder': 'uploads',
        'fileDesc': 'Image Files',
        'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
        'multi': true,
        'auto': false
    });
   }
);
</script> 

نکته کد بالا هم در غیز فعال بودن بارگذاری خودکار و فعال بودن همزمان چندین فایل است.

نیاز هست تا دستوری برای اغاز بارگذاری در صفحه TriggerUpload بنویسم به صورت زیر به قسمتی که آپلودر را اضافه کرده بودیم دو لینک به صورت زیر را در نظر میگیریم.


<a href="javascript:$('#<%=FileUpload1.ClientID%>').fileUploadStart()">آغاز بارگذاری</a>&nbsp; 
           |&nbsp;<a href="javascript:$('#<%=FileUpload1.ClientID%>').fileUploadClearQueue()">پاکسازی</a> 
<div style = "padding:40px">
     <asp:FileUpload ID="FileUpload1" runat="server" />
</div>

برای اینکه اسکریپت های بالا کارایی داشته باشند باید فایل های زیر را به صفحات فرم اضافه کنیم.


<link rel="Stylesheet" type="text/css" href="CSS/uploadify.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.uploadify.js"></script>

میتوانید فایل های مذکور را از آدرس های زیر دریافت کنید:

جی کوئری

آپلودایفی

سپس در ادامه کافی است تا با استفاده از هندلر کنترل لازم را روی آپلودر فرم ها ایجاد کنیم. به صورت زیر صفحه کنترل را بانام Upload.ashx ایجاد و کد نویسی میکنیم.


public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        context.Response.Expires = -1;
        try
        {
            HttpPostedFile postedFile = context.Request.Files["Filedata"];
            
            string savepath = "";
            string tempPath = "";
            tempPath = System.Configuration.ConfigurationManager.AppSettings["FolderPath"]; 
            savepath = context.Server.MapPath(tempPath);
            string filename = postedFile.FileName;
            if (!Directory.Exists(savepath))
                Directory.CreateDirectory(savepath);

            postedFile.SaveAs(savepath + @"\" + filename);
            context.Response.Write(tempPath + "/" + filename);
            context.Response.StatusCode = 200;
        }
        catch (Exception ex)
        {
            context.Response.Write("Error: " + ex.Message);
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

توجه : برای قسمت FolderPath که در نظر گفتیم باید در کانفیگ کد زیر را اضافه کنیم.


<appSettings>
    <add key ="FolderPath" value ="uploads"/>
</appSettings >

نکته : قسمت  "value ="uploads  برابر با نام پوشه ای است که میخواهیم فایلها داخل آن ذخیره شوند پس فایلی با نام uploads روی روت پروژه اضافه میکنیم.

آموزش آپلود چند فایل همزمان با استفاده از جی کوئری Ajax و هندلر در Asp.Net

نتیجه حاصل شده به صورت زیر است :

بارگذاری خودکار

آموزش آپلود چند فایل همزمان با استفاده از جی کوئری Ajax و هندلر در Asp.Net

بارگذاری با دستور اغاز

آموزش آپلود چند فایل همزمان با استفاده از جی کوئری Ajax و هندلر در Asp.Net

دانلود

نویسنده علی بهارلویی
گروه مطلب Asp.Net
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۱۳ مهر ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha