如何使用 Ajax 将文件与表单数据一起发布到 MVC 控制器？答案

【问题标题】：How to Post file along with form data to MVC controller using Ajax?如何使用 Ajax 将文件与表单数据一起发布到 MVC 控制器？
【发布时间】：2019-06-21 02:35:23
【问题描述】：

我正在尝试使用 jquery Ajax 将文件与其他表单数据一起发布到 MVC 控制器。

jQuery Ajax 调用

function SaveStundent () {
    var formData = new FormData();

    var file = document.getElementById("studImg").files[0];
    formData.append("studImg", file);

    var studentDetails = {
    Name: $('#txtName').val().trim()
    };

    formData.append("studentDetails", studentDetails);

        $.ajax({
        type: "POST",
        url: "@(Url.Action("CreateStudent", "Student"))",          
        data: formData,
        processData: false,
        contentType: false,
            success: function (response) {
            }
        });
}

MVC 控制器

[HttpPost]
public ActionResult CreateStudent(Student studentDetails)
{
// ...
}

学生模型

public class Student
{
    public string Name { get; set; }
}

虽然我能够在请求中获取文件，但 studentDetails 参数在 MVC 控制器中始终为空。

【问题讨论】：

你是如何调用表单提交的？使用表单的提交按钮或表单外的任何其他按钮？
你添加 Http.Post 了吗？
@TanvirArjel jQuery 方法 'SaveStundent' 将在 'Submit' 按钮 onclick 事件上被调用。
@beibeizhu 是的，我做到了。对不起，我错过了添加代码
@Gopi 添加完整的Student 模型和用于在表单中上传文件的输入字段。请！

标签： c# jquery ajax asp.net-mvc

【解决方案1】：

试试这个

function SaveStundent () {
    var formData = new FormData();

    var file = document.getElementById("studImg").files[0];
    formData.append("studImg", file);

    var Name= $('#txtName').val().trim()

    formData.append("Name", Name);

        $.ajax({
        type: "POST",
        url: "@(Url.Action("CreateStudent", "Student"))",          
        data: formData,
        processData: false,
        contentType: false,
            success: function (response) {
            }
        });
}

然后更改您的操作以获取如下图像

[HttpPost]
public ActionResult CreateStudent(Student studentDetails,HttpPostedFileBase studImg)
{
// ...
}

工作代码

<form id="frm" enctype="multipart/form-data">
    <input type="file" name="studImg" id="studImg" />
    <input type="text" name="txtName" id="txtName" />
    <input type="button" value="Save" onclick="SaveStundent()" />
</form>

<script>
    function SaveStundent () {
        var formData = new FormData();
        var file = document.getElementById("studImg").files[0];
        formData.append("studImg", file);

        var Name = $('#txtName').val().trim()
        formData.append("Name", Name);

        $.ajax({
        type: "POST",
        url: "@(Url.Action("CreateStudent", "Student"))",          
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
            }
        });
    }
</script>

public ActionResult CreateStudent(string Name, HttpPostedFileBase studImg)
{
    return null;
}

【讨论】：

它确实适用于表单数据，但在 studImg 中没有收到任何文件，但 Request.Files.Count 为 1
插入缓存：ajax 参数为假
没有帮助
答案在CreateStudent操作方法中没有Student参数，我认为这在OP中很重要。
上传不需要单独的参数。改动： 1. 学生类——public HttpPostedFileBase studImg {get; set;} ... 2. CreateStudent 方法：public ActionResult CreateStudent(Student student) {...} 3. $.ajax({ url: '/home/CreateStudent', ...} 答案中的其他所有内容都是正确的. 我用 MVC 5 测试了这个