代码之家 › 专栏 › 技术社区 › Gopi

如何使用Ajax将文件以及表单数据发布到MVC控制器?

asp.net-mvc ajax jquery c#

Gopi · 技术社区 · 6 年前

我尝试使用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控制器中的参数始终为空。

1 回复 | 直到 6 年前

Gopi 6 年前

试试这个

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

推荐文章

SpaceCowboy74 Mohammad Aghazadeh · 使用Fluent Validation比较数组中的值

7 月前