将表单与多个文件一起发送到Web API
本文关键字:Web API 一起 文件 表单 | 更新日期: 2023-09-27 18:04:39
我对Web API 2.0的工作方式仍然很陌生,但我已经开始掌握一些东西了。我一直有一个问题,虽然是如何发布表单与多个文件,用户上传到我的控制器。
我想我主要需要帮助如何使用JavaScript
或jquery
与ajax
发布所有正确的值。
这是我的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; }
}
当然,我需要更改表单中的名称以反映新模型。
如果有人能帮助我如何张贴他们到我的控制器,将不胜感激,因为这是唯一的事情,我还在努力。
因为这比我想象的要困难得多。我决定走另一条路。
因为我已经在使用Kendo UI
框架,我现在使用Kendo Upload
小部件来处理我的文件上传。我让它异步地将文件上传到我的Web API控制器,然后我有一个单独的动作来处理提交的表单。
当然,我也欢迎其他答案,这些答案可能能够通过在一次调用中发布所有数据来解决这个问题,但现在,这个就可以了。