将表单与多个文件一起发送到Web API

本文关键字:Web API 一起 文件 表单 | 更新日期: 2023-09-27 18:04:39

我对Web API 2.0的工作方式仍然很陌生,但我已经开始掌握一些东西了。我一直有一个问题,虽然是如何发布表单与多个文件,用户上传到我的控制器。

我想我主要需要帮助如何使用JavaScriptjqueryajax发布所有正确的值。

这是我的HTML的一个片段:

<form id="CreateAnnouncementForm" class="form-horizontal">
    <input type="hidden" name="announcementTypeID"/>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label">Headline</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="headline" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">More Info</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" name="moreInfo"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Attachments</label>
                    <div class="col-sm-10">
                        <input type="file" name="Attachments" multiple/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

这是JavaScript/jQuery/Ajax,我通常使用它来发送我的表单到控制器:

onAnnouncementCreate: function () {
    var form = $("#CreateAnnouncementForm");
    var validator = $(form).kendoValidator().data("kendoValidator");
    if (validator.validate()) {
        var options = {
            url: getApiUrl() + "/Announcement",
            dataType: "json",
            type: "POST",
            headers: {
                "Authorization": "Bearer " + getJwtToken(),
                "LocationId": getCurrentLocation()
            },
            data: $(form).serialize(),
            statusCode: {
                200: function () {
                    $("#AnnouncementCreateModal").modal("hide");
                    announcementViewModel.reloadGrids();
                },
                400: function (response) {
                    toastr.options = { "positionClass": "toast-bottom-full-width";
                    toastr.error(response.responseText);
                }
            }
        };
        $.ajax(options);
    }
}

现在我相信这将是最好的,如果我只是创建一个ViewModel,其中包含ViewModel的所有值在我的形式,并有它包含一个IEnumerable的附件,用户可以在表单中上传。

我遇到的麻烦是正确地将附件添加到表单中,以便它们正确地映射。

我的ViewModel看起来像这样:

public class AnnouncementCreateViewModel
{
    public AnnouncementViewModel Announcement { get; set; }
    public IEnumerable<HttpPostedFileBase> Attachments { get; set; }
}

当然,我需要更改表单中的名称以反映新模型。

如果有人能帮助我如何张贴他们到我的控制器,将不胜感激,因为这是唯一的事情,我还在努力。

将表单与多个文件一起发送到Web API

因为这比我想象的要困难得多。我决定走另一条路。

因为我已经在使用Kendo UI框架,我现在使用Kendo Upload小部件来处理我的文件上传。我让它异步地将文件上传到我的Web API控制器,然后我有一个单独的动作来处理提交的表单。

当然,我也欢迎其他答案,这些答案可能能够通过在一次调用中发布所有数据来解决这个问题,但现在,这个就可以了。