Question

我使用这样的代码来接收客户信息。除了我的客户信息，我还必须上传文件。

CSHTML文件

@using (Html.BeginForm("AddPersonInfo", "Management", FormMethod.Post, new { enctype = "multipart/form-data", id = "frmAddPerson" })) { @Html.AntiForgeryToken()
<div id="divControls" class="form inline">

    <div class="form-group">
        @Html.LabelFor(model => model.FName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-12">
            @Html.EditorFor(model => model.FName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.FName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.LName, htmlAttributes: new { @class = "control-label col-md-2"})
        <div class="col-md-12">
            @Html.EditorFor(model => model.LName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.LName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.FileName, htmlAttributes: new { @class = "control-label col-md-2", style = "float: right" })
        <div class="col-md-12">
            <input id="postedFile" type="file" data-buttonText="Select File">
            @Html.ValidationMessageFor(model => model.FileName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-12">
            <input style="float: right" id="btnSave" type="button" value="Save" class="btn btn-info" />
        </div>
    </div>
</div>
}

Java脚本文件

<script>
$(document).ready(function () {
    $("#btnSave").click(function (e) {
        e.preventDefault();
        if ($("#frmAddPerson").valid()) {
            var formData = new FormData();
            var file = document.getElementById("postedFile").files[0];
            formData.append("postedFile", file);
            $.ajax({
                url: "/Management/AddPersonInfo",
                data: formData,
                type: "Post",
                dataType: "Json",
                contentType: false,
                processData: false,
                success: function (result) {
                    alert("success")
                },
                error: function (result) {
                    alert("error");
                }
            });
        }
    });
});
</script>

控制器文件

public ActionResult AddPersonInfo(PersonViewModel model, HttpPostedFileBase postedFile)
{
    try
    {
        //
    }
    catch
    {
        //
    }
}

在Controller的AddPersonInfo中，文件信息（postingFile）将被正确接收但是表单信息（模型）将被收到null

Answer 1

在ajax请求中，您只是将postedFile添加到FormData()

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

尝试手动添加模型，

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

var model: {
  'FName' : 'John',
  'LName' : 'Smith'
}
formData.append('model', model);

在ASP.Net MVC中使用Jquery上传表单数据和文件

1 个答案: