MVC Core：通过 Ajax 请求上传文件并返回 JSON 对象而不重定向答案

【问题标题】：MVC Core : Upload file through Ajax request and return JSON object without redirectMVC Core：通过 Ajax 请求上传文件并返回 JSON 对象而不重定向
【发布时间】：2019-03-14 05:25:25
【问题描述】：

我有一个需求，我想将一个 excel 文件上传到控制器，读取文件，处理其数据并将其发送回与 JSON 对象相同的视图。

我想使用 AJAX 调用来实现这一点，因为我想捕获它的成功回调并根据收到的响应操作 DOM。我已经尝试了一些东西，但我无法击中控制器。对此的任何帮助表示赞赏。

下面显示的是我的 JS、HTML 和 C# 代码：

function SubmitInfo() {
    var formData = new FormData();
    formData.append('file', $('#fileInput')[0].files[0]); // myFile is the input type="file" control

    var _url = '@Url.Action("Upload", "CrossValidation")';

    $.ajax({
        url: _url,
        type: 'POST',
        data: formData,
        processData: true,  // tell jQuery not to process the data
        contentType: false,  // tell jQuery not to set contentType
        success: function (result) {
            //manipulate DOM and bind response with Kendo grid
            alert("result");
        },
        error: function (jqXHR) {
        },
        complete: function (jqXHR, status) {
        }
    });
}

<div class="col-md-4">
    <input id="fileInput" type="file">
</div>
<div class="col-md-4">
    <input type="submit" value="Upload file" onclick="SubmitInfo()"/>
</div>

public JsonResult Upload(IFormFile formData)
{
    //Do something here....
    return Json("");
}

【问题讨论】：

标签： ajax model-view-controller file-upload .net-core

【解决方案1】：

您发布的代码中有两个明显的问题：

processData: true。通过将此设置为true（默认值），您要求jQuery 尝试将您提供的data 转换为查询字符串，这不是您想要的。相反，您希望将其设置为 false，这将要求 jQuery 保留数据并按原样将其传递给底层 XMLHttpRequest，其中数据将被正确格式化为 multipart/form-data。李>
传递给formData.append 的name 参数必须与ASP.NET Core MVC 控制器中IFormFile 参数的名称匹配。您在前者中使用file，在后者中使用formData，因此您需要更改其中一个以使它们相同。

【讨论】：