آپلود همزمان چند فایل و تصویر به صورت 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 ارسال می کنیم.