javascript - 当我发送其他值作为参数时，Kendo Upload 文件在 Controller 中发送 null

Question

情况是这样的: 我有一个表单，当我单击提交按钮时，正在使用 kendo 上传控件发送一个文件，并且 Controller 的方法操作正在使用 HttpPostedFileBase 在参数中接收该文件。

这是我的 HTML 代码:

@using (Html.BeginForm("ConfirmarOposicion", "Gestion", FormMethod.Post, new { @id = "Frm-login", role = "form", @class = "form-horizontal" }))
{
    @(Html.Kendo().Upload()
        .Name("files")
    )

    <button class="btn btn-success" type="submit" id="confirm" >Confirm</button>
}

这是我的 Controller :

public async Task<ActionResult> ConfirmarOposicion(IEnumerable<HttpPostedFileBase> files)
{
    // Here the parameter files is not null..
}

到目前为止一切正常。问题是当我尝试将更多值作为参数发送到 Controller 的同一方法中时。 我想发送的其他值是一个数组，另一个是数字。 我尝试在 javaScript 中使用 ajax 发送这两个值。

这是我尝试发送另外两个值时的 JavaScript 代码:

$("#confirm").click(function () {
        var numMarca = $("#numMarca").val()
        var idsToSend = [];
        var grid = $("#Grid2").data("kendoGrid")
        var ds = grid.dataSource.view();
        for (var i = 0; i < ds.length; i++) {
            var row = grid.table.find("tr[data-uid='" + ds[i].uid + "']");
            var checkbox = $(row).find(".checkbox");
            if (checkbox.is(":checked")) {
                idsToSend.push(ds[i].DescMarca);
                idsToSend.push(ds[i].IntencionOposicion = 1);
            } else {
                idsToSend.push(ds[i].DescMarca);
            }
        }

        $.ajax({
            url: '@Url.Action("ConfirmarOposicion", "Gestion")',
            data: { ids: idsToSend, marca: numMarca },
            type: 'POST',
            dataType: "json",
            success: function (data) {

            }
        });

当我点击提交按钮时，我会在发送输入文件的同一 Controller 中发送这两个值。

现在这是我的 Controller :

public async Task<ActionResult> ConfirmarOposicion(IEnumerable<HttpPostedFileBase> files, string[] ids, string marca)
{
    // here the array ids and the value of marca is not null, but the parameter files it is null

}

这就是我遇到的问题。 我需要在 Controller 的同一方法操作中发送所有这些值。 我怎样才能做到这一点？

Answer 1

问题:这行代码 data: { ids: idsToSend, marca: numMarca }, 您手动构建一个只有两个参数的数据对象，并且没有处理上传的文件，因此文件数据会丢失。

解决方案:构建一个 FormData 对象，然后将所有必需的数据(包括您上传的文件)填充到其中，并将该对象发送到服务器。

var formData = new FormData();
var file_data = $('#files')[0].files; // for multiple files if only single file use $('#files')[0].files[0] and skip the loop.
for(var i = 0;i<file_data.length;i++){
    formData.append("file_"+i, file_data[i]);
}    
formData.append('ids', idsToSend);
formData.append('marca', numMarca );

$.ajax({
    url: '@Url.Action("ConfirmarOposicion", "Gestion")',
    data: formData ,  // pass the formData object to server.
    type: 'POST',
    processData: false,
    contentType: false,
    dataType: "json",
    success: function (data) {

    }
 });

注意:$('#files') 获取文件控件，kendo 语法中的 .Name("files") 将文件控件的 id 设置为文件。

编辑:我将 processData: false, 和 contentType: false, 添加到 ajax 选项中。 归功于this answer

将 processData 设置为 false 可以防止 jQuery 自动将数据转换为查询字符串。请参阅the docs了解更多信息。

必须将 contentType 设置为 false，否则 jQuery will set it incorrectly .