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

Question

我正在尝试发布一个表单，该表单具有输入文本字段以及使用 jquery ajax 的文件上传控件。但是，我不断收到 404 未找到错误。为了简洁起见，下面我只包含了 razor 代码的相关部分:

这是 Razor 代码的示例:

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

Controller 操作:

    [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]);

但是，在这种情况下， Controller 操作不会收到任何数据，并且 request.form 为空。

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

谢谢。

Answer 1

像这样使用

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

希望这对您有帮助