如何将表单数据发送到获取文件和类类型参数的操作中？答案

【问题标题】：How to send form data into an action that gets a file and a parameter of a class type?如何将表单数据发送到获取文件和类类型参数的操作中？
【发布时间】：2022-01-21 22:07:48
【问题描述】：

我使用的表单由一些输入和一个文件选择组成。我正在尝试使用 jQuery Ajax 上传文件和表单信息。我使用以下操作将数据插入数据库：

public async Task<IActionResult> UploadPm(IFormFile file, AdminViewModel adminModel)
{
    if (!ModelState.IsValid)
    {
        return BadRequest("Enter Required Fields");
    }

    var fileName = Path.GetFileName(file.FileName);
    var fileExtension = Path.GetExtension(fileName);
    var newFileName = string.Concat(Convert.ToString(Guid.NewGuid()), fileExtension);
    var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/PmFiles/UploadedByAdmin", newFileName);

    using (var stream = new FileStream(path, FileMode.Create))
    {
        await file.CopyToAsync(stream);
    }

    int CurrentUserId = Convert.ToInt32(HttpContext.Session.GetString("userId"));

    var inputElements = new PM()
    {
        pmNumber = Convert.ToInt32(adminModel.pmNumber),
        costCenter = adminModel.costCenter,
        serviceType = adminModel.serviceType,
        destination = adminModel.destination,
        workCenter = adminModel.workCenter,
        creationDate = DateTime.Now,
        startDate = DateTime.Now,
        endDate = DateTime.Now,
        mainFileName = newFileName,
        userId = CurrentUserId
    };
    
    _pmRepository.InsertPM(inputElements);
    _pmRepository.Save();
    return View("Index");
}

发送数据的jQuery部分如下：

<script>
    $(document).ready(function () {
        var formData = new FormData();
        $('#submitForm').on('click', function (e) {
            e.preventDefault();

            $_pmNum = $('#pm-num').val();
            $_costCenter = $('#cost-center').val();
            $_serviceType = $('#serviceType').val();
            $_destination = $('#destination').val();
            $_workCenter = $('#workCenter').val();
            $_startDate = $('#date-input1').val();
            $_endDate = $('#date-input2').val();

            formData.set(file, $('#file')[0].files[0]);

            alert($_costCenter);
            
            $.ajax({
                type: "POST",
                url: "/Admin/UploadPm",
                contentType: true,
                processData: true,
                data: {
                    pmNumber: $_pmNum,
                    costCenter: $_costCenter,
                    serviceType: $_serviceType,
                    destination: $_destination,
                    workCenter: $_workCenter,
                    startDate: $_startDate,
                    endDate: $_endDate,
                    file: formData
                }
            });
        });
    });
</script>

问题是当我调试控制器时，所有的输入变量都是空的。在这种情况下使用的最佳方法是什么？

更新：

html部分如下：

<div class="panel-body">
    <div class="row">
        <form enctype="multipart/form-data" method="post">
            <div class="col-lg-6 col-md-6">
                <div class="form-group notification-font">
                    <section>
                        <input class="form-control numbers-only" asp-for="pmNumber" name="pmNumber" id="pm-num">
                    </section>

                    <section>
                        <select class="form-control" asp-for="costCenter" name="costCenter" id="cost-center">
                            @{
                                foreach (var item in ViewData["CostCenterItem"] as HashSet<string>)
                                {
                                    <option>@Html.DisplayName(item)</option>
                                }
                             }
                        </select>
                    </section>

                    <section>
                        <select class="form-control" asp-for="serviceType" name="serviceType" id="serviceType">
                            <option>opt1</option>
                            <option>opt2</option>
                            <option>opt3</option>
                            <option>opt4</option>
                            <option>opt5</option>
                            <option>opt6</option>
                            <option>opt7</option>
                            <option>opt8</option>
                        </select>
                    </section>

                    <section>
                        <input class="form-control" asp-for="destination" name="destination" id="destination">
                    </section>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 notification-font">
                <section>
                    <select class="form-control" asp-for="workCenter" name="workCenter" id="workCenter">
                        <option>opt1</option>
                        <option>opt2</option>
                        <option>op3</option>
                    </select>
                </section>

                <section>
                    <input class="form-control" id="date-input1" name="creationDate" asp-for="startDate">
                </section>

                <section>
                    <input class="form-control" id="date-input2" name="startDate" asp-for="endDate">
                </section>
                
                <section>
                    <input id="file" name="file" type="file">
                </section>
            </div>
        </form>
    </div>
    <div class="row">
        <button type="button" class="btn btn-success notification-font" id="submitForm">
            <i class="fa fa-plus"></i>Add New PM</button>
    </div>
</div>

【问题讨论】：

您应该尝试将$_pmNum,... 像这样formData.append('pmNumber',$('#pm-num').val()) 附加到formData 并更改ajax 中的数据$.ajax({ data: formData })
@Lam Tran Duc 如何将所有变量放入 formData？另一个问题是文件上传。我的操作需要两种类类型作为输入。
可以分享一下html部分吗？我会更容易提供帮助。
@LamTranDuc 我更新了主要问题。
在<option> 的<select> 中没有值，所以$('#cost-center').val() 始终为空。您应该将value 属性添加到每个option 像这样<option value="volvo">

标签： jquery ajax asp.net-core

【解决方案1】：

1.您将json 和form-data 混合使用两种不同的内容类型。如果您发布的数据包含文件，您只能通过表单数据发布。

2.你错过了formData.set(name, value);中的双引号，更改如下：

formData.set(file, $('#file')[0].files[0]);

收件人：

formData.set("file", $('#file')[0].files[0]);

在下面更改您的代码：

<script>
$(document).ready(function () {
    var formData = new FormData();
    $('#submitForm').on('click', function (e) {
        e.preventDefault();

        $_pmNum = $('#pm-num').val();
        formData.set("pmNumber", $_pmNum);
        $_costCenter = $('#cost-center').val();
        formData.set("costCenter", $_costCenter);

        $_serviceType = $('#serviceType').val();
        formData.set("serviceType", $_serviceType);

        $_destination = $('#destination').val();
        formData.set("destination", $_destination);

        $_workCenter = $('#workCenter').val();
        formData.set("workCenter", $_workCenter);

        $_startDate = $('#date-input1').val();
        formData.set("startDate", $_startDate);

        $_endDate = $('#date-input2').val();
        formData.set("endDate", $_endDate);

        formData.set("file", $('#file')[0].files[0]);

        $.ajax({
            type: "POST",
            url: "/Admin/UploadPm",
            contentType: false,        //change here...
            processData: false,        //change here..
            data: formData             
        });
    });
});
</script>

结果：

【讨论】：