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

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

我想我主要需要帮助，如何使用JavaScript或jquery与ajax发布所有正确的值。

这里是我的HTML SNIPPIT：

<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的/阿贾克斯，我通常使用我的形式张贴到控制器：

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; } 
}

当然，我会那么需要改变我的形式名称，以反映新的模式。

如果任何人都可以帮助我如何将它们发布到我的控制器，那将是非常值得赞赏的，因为这是我唯一仍在努力的事情。

来源

2016-08-30 Quiver

通过AJAX发布文件附件并不像你希望的那样直截了当http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously应该给你一些想法。还有一个asp.net mvc的答案 –

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

由于我已经在使用Kendo UI框架，因此我现在使用Kendo Upload小部件来处理我的文件的上传。我有它异步上传文件到我的Web API控制器，然后我有一个单独的行动来处理提交时的形式。

当然，我也欢迎其他答案，也许可以通过在一次调用中发布所有数据来解决这个问题，但现在，这将做到。

来源

2016-09-01 03:00:17 Quiver

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

回答

相关问题