Невозможно загрузить сообщение о вызове для передачи группы файлов в Action

Question

Проблема в том, что при передаче массива объектов типа File в действие модели MVC возникает проблема с вызовом $ .post

Я использую библиотеку jquery.filedrop для многократного добавления. затем, после того, как все элементы будут удалены, и когда нажата кнопка, все эти файлы будут отправлены в Action, называемый Upload.

HTML-код

<h2>Upload</h2>

<legend>Upload a file</legend>
<div class="editor-field">
    <input type="file" id="file" name="file" />
</div>

<h2>Drag & Drop file upload </h2>

<div id="dropArea"></div>

<h4>Uploaded files : </h4>
<ul class="list-group" id="uploadList"></ul>
<input id="submsion" type="submit" />

Javascript код:

$(function () {
            $('#dropArea').filedrop({
                allowedfileextensions: ['.doc', '.docx', '.pdf', '.jpg', '.jpeg', '.png', '.PNG', '.gif', '.txt'],
                maxfiles: 3,
                maxfilesize: 5, // in MB
                dragOver: function () {
                    $('#dropArea').addClass('active-drop');
                },
                dragLeave: function () {
                    $('#dropArea').removeClass('active-drop');
                },
                drop: function () {
                    $('#dropArea').removeClass('active-drop');
                },
                afterAll: function (e) {
                    $('#dropArea').html('file(s) uploaded successfully');
                },
                uploadFinished: function (i, file, response, time) {
                    $('#uploadList').append('<li class="list-group-item">' + file.name + '</li>')
                    addToFilePile(file)
                }
            })
        })

    var arrayOfFiles = [];
    var singularObject;
    $('#file').on('change', function () {
        singularObject = $('#file').val();
    });

    function addToFilePile(file) {
            arrayOfFiles.push(file);
    }

        $('#submsion').click(function () {
            var finalPile = [];
            if (arrayOfFiles != null) {
                finalPile = arrayOfFiles;
                if (singularObject != null) {
                    finalPile.push(singularObject);
                }
        }
            else if (singularObject != null) {
                finalPile = singularObject;
        }

        else {
              //both are empty - do something about it
            }

            console.log(finalPile);
            $.post('@Url.Action("Home", "Upload")', { files: finalPile }, function (data) {
                    console.log("POST done");
                });
    });

C # Код действия:

[HttpPost]
        [ActionName("Upload")]
        public ActionResult Upload(IEnumerable <HttpPostedFile> files)
        {
            if (files != null)
            {
                foreach (var item in files)
                {
                    if (item != null)
                    {
                        string pathname = Path.Combine(@"D:\Projects\SavingFile\UploadedFiles", Path.GetFileName(item.FileName));

                        item.SaveAs(pathname);
                    }
                }
            }
            return View();
        }

В настоящее время при использовании перетаскивания я получаю ошибку 0: Invalid calling object в Edge и Uncaught TypeError: Illegal invocation в Chrome, что не очень полезно. И при выборе файла из <input> я получаю это сообщение об ошибке: HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier). (XHR)POST - http://localhost:51348/Upload/Home

Answer 1

Была пара проблем.1) jQuery.ajaxSettings.traditional = true требуется для передачи массива в IEnumarable 2) '@Url.Action("Home", "Upload")' -> '@Url.Action("Upload")'

Это может исправить некоторые проблемы.Тем не менее, вызов был успешным, но IEnumarable всегда был пустым, и исправить это можно здесь: Как загрузить файлы с помощью ajax в asp.net действие контроллера mvc