آپلود همزمان چند فایل و تصویر به صورت Ajax در Asp.Net Core
1 0

آپلود همزمان چند فایل و تصویر به صورت Ajax در Asp.Net Core


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

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

ابتدا کنترلری به نام UploadFileController ایجاد کنید و کدهای آن را به صورت زیر تغییر دهید

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Net.Http.Headers;

namespace MvcAspCore.Controllers
{
    public class UploadFileController : Controller
    {
        private IHostingEnvironment hostingEnv;
        public UploadFileController(IHostingEnvironment env)
        {
            // for upload File
            this.hostingEnv = env;
        }

        #region UploadFiles Ajax
        [HttpGet]        
        public IActionResult GetUploadFilesAjax()
        {
            return View("UploadFilesAjax");
        }

        [HttpPost]        
        public IActionResult UploadFilesAjax()
        {
            long size = 0;
            var files = Request.Form.Files;
            foreach (var file in files)
            {
                var filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
                filename = hostingEnv.WebRootPath + $@"\{filename}";
                size += file.Length;
                using (FileStream fs = System.IO.File.Create(filename))
                {
                    file.CopyTo(fs);
                    fs.Flush();
                }
            }
            string message = $"{files.Count} file(s) / { size}bytes uploaded successfully!";
            return Json(message);
        }
        #endregion
    }
}

در اینجا ابتدا تنظیمات اولیه در سازنده کنترلر انجام دادیم و سپس یک متد از نوعIActionResult  به نام UploadFilesAjax ایجاد کردیم و سپس با استفاده از دستور Request.Form.Files فایل های ارسالی را دریافت کردیم و و برای آپلود چندین فایل از یک foreach برای خواندن فایل های دریافتی که به صورت ایجکس از سمت کاربر ارسال می شود استفاده کردیم.

 

کدهای View

حال یک view برای متد UploadFilesAjax ایجاد کنید و کدهای آن را به صورت زیر تغییر دهید

@{
    ViewData["Title"] = "Upload Ajax";
}

<form method="post" enctype="multipart/form-data">
    <input type="file" id="files" name="files" multiple/>
    <input type="button" id="upload" value="Upload Selected Files"/>
</form>

در کدهای بالا کار خاصی انجام ندادیم و فقط یک فرم برای آپلود ایجاد کردیم.

کدهای Jquery

ما با استفاده از jquery فایل ها را به صورت ایجکس به سمت سرور ارسال می کنیم

@section Scripts {
    <script type="text/javascript">
        $(document)
            .ready(function() {
                $("#upload")
                    .click(function(evt) {
                        var fileUpload = $("#files").get(0);
                        var files = fileUpload.files;
                        var data = new FormData();
                        for (var i = 0; i < files.length; i++) {
                            data.append(files[i].name, files[i]);
                        }
                        $.ajax({
                            type: "POST",
                            url: "/UploadFile/UploadFilesAjax",
                            contentType: false,
                            processData: false,
                            data: data,
                            success: function(message) {
                                alert(message);
                            },
                            error: function() {
                                alert("There was error uploading files!");
                            }
                        });
                    });
            });
    </script>
}

در کدهای بالا زمانی که روی دکمه upload کلیک می شود ابتدا فایل ها یا تصاویر را دریافت می کنیم و در یک متغیری به نام  data  قرار می دهیم و سپس با استفاده از ajax اطلاعات را به اکشن UploadFilesAjax در کنترلر UploadFile ارسال می کنیم.

دانلود

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

نظر / سوال

Captcha