无法上传调用 post 将文件组传输到 Action

Question

问题在于，将文件类型对象数组传递给 MVC 模型操作时，$.post 调用有问题

我正在做的是多次使用 jquery.filedrop 库。然后，在放下所有项目并按下按钮时，所有这些文件都将发送到名为“上传”的操作。

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();
        }

目前，在使用拖放时，我在 Edge 中遇到 0: Invalid calling object 错误，在 Chrome 中遇到 Uncaught TypeError: Illegal invocation 错误，这不是很有帮助。当从 <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 始终为空，解决方法如下：

无法上传调用 post 将文件组传输到 Action

Unable to upload call post for transfering group of files to Action

c#

asp.net-mvc

jquery

post

filedrop.js