使用jQuery将多个文件发布到MVC5控制器

时间:2014-07-29 16:45:13

标签: jquery asp.net ajax asp.net-mvc asp.net-mvc-5

我试图将我在页面上收集的一些文件发布到我的ASP.Net MVC5控制器。我将向您展示我期望的请求对象,以及我用来发布请求的前端代码。

当涉及到控制器时,CoverSheet确实可以通过,但无论我做什么,SupportingDocuments数组始终为null。我尝试使用FormData,我尝试使用普通的JS对象,两者都有相同的结果。

public class SomeRequest
{
    public int SomeRequestId { get; set; }
    public HttpPostedFileBase CoverSheet { get; set; }
    public HttpPostedFileBase[] SupportingDocuments { get; set; }
}

这里是前端

var formData = new FormData();
var supportingDocsArray = [];
_.each(supportingDocumentsInput[0].files, function(f) { supportingDocsArray.push(f); });
formData.append('SomeRequestId', self.selectedThing().SomeRequestId);
formData.append('CoverSheet', coverSheetInput[0].files[0]);
formData.append('SupportingDocuments', supportingDocsArray);
var request = $.ajax({
    url: '/SomeController/Upload',
    data: formData,
    type: 'POST',
    dataType: 'json',
    processData: false,
});

正如您所看到的,我期待CoverSheet中的单个文件和SupportingDocuments中可能的文件数组。

当涉及到控制器时,CoverSheet确实通过了,但无论我做什么,SupportingDocuments数组总是为空。

有任何提示让这个工作吗?

谢谢,祝你有个美好的一天。

1 个答案:

答案 0 :(得分:1)

看起来解决此问题的最佳方法是不要指望数组进入请求对象。

这是更新的控制器代码:

        public async Task<JsonNetResult> Upload(ThingUploadRequest req)
    {
        foreach (string filename in Request.Files)
        {
            var file = Request.Files[filename];
            if (file != req.CoverSheet)
            {
                req.SupportingDocuments.Add(file);
            }
        }

        var result = await _uploadHandler.Upload(req);
        return new JsonNetResult
        {
            Data = result
        };
    }

以及更新的前端代码:

                var formData = new FormData();
                _.each(supportingDocumentsInput[0].files, function(f) {
                    formData.append(f.name, f);
                });
                formData.append('SomeThingId', self.selectedThing().ThingId);
                formData.append('CoverSheet', coverSheetInput[0].files[0]);
                var request = $.ajax({
                    url: '/SomeController/Upload',
                    data: formData,
                    type: 'POST',
                    dataType: 'json',
                    processData: false,
                    contentType: false
                });