توضیحات و دانلود

استفاده از جاوا اسکریپت برای آپلود چندین فایل با کنترل های FileUpload در ASP.Net
0 0
استفاده از جاوا اسکریپت برای آپلود چندین فایل با کنترل های FileUpload در ASP.Net

با سلام  در این مقاله  توضیح می دهیم که چگونه فایل های چندگانه را به صورت پویا با اضافه کردن کنترل های FileUpload با استفاده از جاوا اسکریپت آپلود کنید.

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

1. اضافه کردن کنترل های FileUpload به طور پویا با استفاده از جاوا اسکریپت

2. کنترل فایلها را به صورت پویا با استفاده از جاوا اسکریپت حذف کنید.

اگر از جاوا اسکریپت استفاده کنیم، UI زیبا می شود چون نیاز به پسورد یا AJAX برای اضافه یا حذف FileUpload Controls  ندارد.

اضافه و حذف کنترلهای FileUpload با استفاده از جاوا اسکریپت

در زیر کد HTML  است. همانطور که می بینید یک دکمه HTML اضافه کرده ایم تا فایل های جدید FileUpload را اضافه کنیم . یک DIV FileUploadContainer که در آن فایل های کنترل FileUpload پویا اضافه خواهد شد و یک دکمه آپلود ASP.Net برای آپلود فایل ها زمانی که دکمه Upload  را کلیک می کنیم.

مهم این است که توجه داشته باشید که شما باید enctype="multipart/form-data را به فرم اضافه کنید تا اجازه آپلود فایلها از طریق کنترلهای FileUpload پویا داده شود.

<form id="form1" runat="server" enctype="multipart/form-data" method = "post">

    <span style ="font-family:Arial">Click to add files</span>&nbsp;&nbsp;

    <input id="Button1" type="button" value="add" onclick = "AddFileUpload()" />

    <br /><br />

    <div id = "FileUploadContainer">

        <!--FileUpload Controls will be added here -->

    </div>

    <br />

    <asp:Button ID="btnUpload" runat="server"

      Text="Upload" OnClick="btnUpload_Click" />

</form>

در حال حاضر برای اضافه و حذف فایل های کنترل , فایل ها به صورت پویا در توابع جاوا اسکریپت است که مورد استفاده قرار می گیرند.

<script type = "text/javascript">

var counter = 0;

function AddFileUpload()

{

     var div = document.createElement('DIV');

     div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +

                     '" type="file" />' +

                     '<input id="Button' + counter + '" type="button" ' +

                     'value="Remove" onclick = "RemoveFileUpload(this)" />';

     document.getElementById("FileUploadContainer").appendChild(div);

     counter++;

}

function RemoveFileUpload(div)

{

     document.getElementById("FileUploadContainer").removeChild(div.parentNode);

}

</script>

همانطور که در ابتدا متوجه شدید، یک عنصر DIV را ایجاد می کنیم و سپس یک فایل HTML File Control را با یک دکمه HTML اضافه می کنیم تا FileUpload Control ها را حذف کنیم. همچنین بر روی دکمه حذف کلیک میکنیم و از Function RemoveFileUpload می خواهیم که فایل کنترل Upload را به صورت پویا ایجاد کند.

آپلود فایل از سرور

در Server Side کد زیر  رویداد کلیک را در دکمه آپلود می نویسیم .

C #

protected void btnUpload_Click(object sender, EventArgs e)

{

    for (int i = 0; i < Request.Files.Count; i++)

    {

        HttpPostedFile PostedFile = Request.Files[i];

        if (PostedFile.ContentLength > 0)

        {

            string FileName = System.IO.Path.GetFileName(PostedFile.FileName);

            PostedFile.SaveAs(Server.MapPath("Files\\") + FileName);

        }

    }

}

VB.Net

Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs)

  For i As Integer = 0 To Request.Files.Count - 1

   Dim PostedFile As HttpPostedFile = Request.Files(i)

   If PostedFile.ContentLength > 0 Then

      Dim FileName As String = System.IO.Path.GetFileName(PostedFile.FileName)

      PostedFile.SaveAs(Server.MapPath("Files\") + FileName)

   End If

  Next

End Sub

در کد بالا، به سادگی از طریق مجموعه Request.Files که شامل فایل های آپلود شده است، حلقه می زنیم و سپس هر یک از آنها را به صورت یک به یک در یک پوشه به نام Files در root folder وب سایت ذخیره می کنیم.

پیکربندی Web.Config

از آنجا که این مقاله در مورد آپلود فایل های چندگانه است، مهم است که حداکثر اندازه مجاز فایل را مورد بحث قرار دهیم. به طور پیش فرض ASP.Net  فایل های اندازه حداکثر 4MB را در یک زمان اجازه می دهد. از این رو برای ارسال اطلاعات بیشتر، باید این حد را افزایش دهیم. اگر httpRuntime در بخش Web.Config، خود ندارید، می توانید به سادگی کد زیر را در فایل خود قرار دهید.

<httpRuntime

  executionTimeout="110"

  maxRequestLength="4096"

  requestLengthDiskThreshold="80"

  useFullyQualifiedRedirectUrl="false"

  minFreeThreads="8"

  minLocalRequestFreeThreads="4"

  appRequestQueueLimit="5000"

  enableKernelOutputCache="true"

  enableVersionHeader="true"

  requireRootedSaveAsPath="true"

  enable="true"

  shutdownTimeout="90"

  delayNotificationTimeout="5"

  waitChangeNotification="0"

  maxWaitChangeNotification="0"

  enableHeaderChecking="true"

  sendCacheControlHeader="true"

  apartmentThreading="false"

/>

برای افزایش حداکثر اندازه فایل، شما باید مقدار ویژگی maxRequestLength را در کیلوبایت (KB) تغییر دهید. برای مثال اگر شما می خواهید حد مجاز آپلود را به 10 مگابایت تنظیم کنید، باید مقدار آن را به 10240 تنظیم کنید. پارامتر مهم دیگری executionTimeout است . این مقدار حداکثر زمان را در ثانیه تعیین می کند. ASP.Net درخواست را پردازش می کند و پس از آن پردازش را متوقف می کند. به طور پیش فرض مقدار 110 ثانیه است. شما می توانید آن را به ارزش مورد نیاز خود تغییر دهید

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :