jquery - 使用jquery ajax将表单数据和文件发布到asp.net core rc2

This question already has answers here:

How to append whole set of model to formdata and obtain it in MVC
                            
                                （3个答案）
                            
                    
                3年前关闭。
        

    

我正在尝试使用jquery ajax发布具有输入文本字段以及文件上传控件的表单。但是，我不断收到404 not found错误。下面，为简洁起见，我仅包含剃须刀代码的相关部分：

这是剃刀代码的示例：

<form id="uploadForm" asp-action="FileUpload" asp-controller="Content" method="post" enctype="multipart/form-data">
        <input asp-for="Title" class="form-control" required />
        <input asp-for="UploadFormFile">
        <button type="button" id="uploadButton" class="btn btn-primary" >Upload</button>
</form>

Javascript：

$(document).ready(function () {
    $("#uploadButton").click(function (e) {

        var data = new FormData($("uploadForm").serialize());
        var uploadedFile = $("#UploadFormFile").get(0).files[0];
        data.append(uploadedFile.name, uploadedFile);

        $.ajax({
            url: '@Url.Action("FileUpload", "Content")',
            type: "POST",
            data: data,
            contentType: false,
            dataType: false,
            processData: false,
            success: function (result) {
                alert(result);
            }
        });
    });
});

控制器动作：

    [HttpPost]
    public async Task<IActionResult> FileUpload()
    {
        CancellationToken cancellationToken = default(CancellationToken);
        long size = 0;
        var files = Request.Form.Files;

        foreach (var file in files)
        {
            var filename = ContentDispositionHeaderValue
                            .Parse(file.ContentDisposition)
                            .FileName
                            .Trim('"');
            filename = $@"\{filename}";
            size += file.Length;

            using (var fileStream = new FileStream(filename, FileMode.Create))
            {
                ...
            }
        }

        string message = $"{files.Count} file(s)/{ size} bytes uploaded successfully!";
        return Json(message);
    }

我尝试使用答案here，但仍然得到404

我唯一没有得到404的时间是当我将FormData更改为以下内容并且未附加上载的文件时：

var data = new FormData($("uploadForm")[0]);

但是，在这种情况下，控制器操作不会接收到任何数据，并且request.form为null。

那么，是否有可能在asp.net mvc core rc2中使用jquery ajax提交表单数据和文件？

谢谢。

最佳答案

这样使用

var formData = new FormData();
var uploadedFile = document.getElementById("UploadFormFile").files[0];
formData.append(uploadedFile.name, uploadedFile);
var xhr = new XMLHttpRequest();
xhr.open("POST", '@Url.Action("FileUpload", "Content")', true);
xhr.send(formData);

希望这能够帮到你