使用jquery ajax将表单数据和文件发布到asp.net core rc2 [重复]答案

【问题标题】：Posting form data and file using jquery ajax to asp.net core rc2 [duplicate]使用jquery ajax将表单数据和文件发布到asp.net core rc2 [重复]
【发布时间】：2016-10-12 05:50:54
【问题描述】：

我正在尝试使用 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 为空。

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

谢谢。

【问题讨论】：

仅供参考，FormData 对象不接受字符串，仅接受 form DOMElement，并且您的 id 选择器缺少 #。将定义data 的行更改为：var data = new FormData($("#uploadForm").get(0))。至于404错误，检查你的路由。
var data = new FormData($("#uploadForm")[0]); 就是您所需要的（您缺少#），这将包括所有表单控件，包括文件输入
@StephenMuecke，您的代码运行良好。我还尝试上传一个大文件，但由于 maxRequestLength 未设置为更高的值，IIS 不允许它。无论如何，如果您可以发布您的代码行作为答案，我会将其标记为已接受的答案。谢谢。
我会把它标记为骗子:)

标签： jquery ajax asp.net-mvc asp.net-core jquery-file-upload

【解决方案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);

希望对你有帮助

【讨论】：