آپلود تصویر و فایل به صورت Drag and Drop و Ajax در Asp.Net Core

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

ابتدا یک کنترلر به نام UploadDragDrop ایجاد کنید و سپس سازنده پیش فرض را به صورت زیر تغییر دهید

 private IHostingEnvironment hostingEnv;

        public UploadDragDropController(IHostingEnvironment env)
        {
            this.hostingEnv = env;
        }

در ادامه یک متد IActionResult به نام UploadFiles ایجاد و کدهای زیر را به آن اضافه کنید

[HttpGet]
        public IActionResult UploadFiles()
        {
            return View();
        }

        [HttpPost]
        public IActionResult UploadFiles(string str)
        {
            long size = 0;
            var files = Request.Form.Files;

            foreach (var file in files)
            {
                string filename = hostingEnv.WebRootPath + $@"\uploadedfiles\{file.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);
        }

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

@{
    ViewData["Title"] = "آپلود تصویر و فایل";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>UploadFiles</h2>

<form method="post" enctype="multipart/form-data">
    <div id="fileBasket" class="filebasket" style="background: gray; height: 100px; width: 100px;">
        Drag-n-Drop files here.
    </div>
    <br />
    <img id="progress" src="~/Images/ajax-loader.gif" />
</form>

برای آپلود فایل به صورت ایجکس و Drag & Drop از jquery استفاده می کنیم.

@section Scripts{
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {

            $("#progress").hide();

            $("#fileBasket").on("dragenter", function (evt) {
                evt.preventDefault();
                evt.stopPropagation();
            });

            $("#fileBasket").on("dragover", function (evt) {
                evt.preventDefault();
                evt.stopPropagation();
            });

            $("#fileBasket").on("drop", function (evt) {
                evt.preventDefault();
                evt.stopPropagation();
                
            });

        $("#fileBasket").on("drop", function (evt) {
            evt.preventDefault();
            evt.stopPropagation();
            var files = evt.originalEvent.dataTransfer.files;
            var fileNames = "";
            if (files.length > 0) {
                fileNames += "در حال آپلود <br />";
                for (var i = 0; i < files.length; i++) {
                    fileNames += files[i].name + "<br />";
                }
            }
            $("#fileBasket").html(fileNames);

            var data = new FormData();
            for (var i = 0; i < files.length; i++) {
                data.append(files[i].name, files[i]);
            }
            $.ajax({
                type: "POST",
                url: "/UploadDragDrop/UploadFiles",
                contentType: false,
                processData: false,
                data: data,
                success: function (message) {
                    $("#fileBasket").html(message);
                },
                error: function () {
                    $("#fileBasket").html
                        ("خطا در آپلود فایل!");
                },
                beforeSend: function () {
                    $("#progress").show();
                },
                complete: function () {
                    $("#progress").hide();
                }
            });
        });

        });

    </script>
}