使用jQuery Ajax在Web Api中上传多个文件

Question

我在使用jQuery Ajax和Web API上传文件时遇到问题。 当我对API进行POST时，我没有在控制器中上传文件。

在我的HTML中，我有几个带有class =“ file”的文件输入，如下所示：

<form id="edit" enctype="multipart/form-data">
    <input class="file" type="file" name="field_custom_file" accept='image/*' />
    <input class="file" type="file" name="field_custom_file" accept='image/*' />
    <input class="file" type="file" name="field_custom_file" accept='image/*' />
</form>

另外，我有一个执行Javascript函数的按钮：

function send() {
    var files = $('.file')[0].files;
    if (files.length > 0) {
        if (window.FormData !== undefined) {
            var data = new FormData();
            for (var x = 0; x < files.length; x++) {
                data.append("file" + x, files[x]);
            }

            $.ajax({
                type: "POST",
                url: '/api/tripgroups',
                contentType: false,
                processData: false,
                data: data,
                success: function (result) {
                    toastr.success('Trip Group was updated!');
                },
                error: function (xhr, status, p3, p4) {
                    var err = "Error " + " " + status + " " + p3 + " " + p4;
                    if (xhr.responseText && xhr.responseText[0] == "{")
                        err = JSON.parse(xhr.responseText).Message;
                    console.log(err);
                },
                enctype: 'multipart/form-data',
                headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
            });
        } else {
            alert("This browser doesn't support HTML5 file uploads!");
        }
    }
}

最后，在我的Web api控制器中，如果尝试访问HttpContext.Current.Request.Files，则会得到一个空集合，并且如果尝试访问如下内容：

var streamProvider = new MultipartFormDataStreamProvider("images");
await Request.Content.ReadAsMultipartAsync(streamProvider);

然后我得到这个错误：

提供了无效的“ HttpContent”实例。 它没有以“ multipart /”开头的内容类型标头。 参数名称：内容

提前致谢。

Answer 1

您正在使用API​​，因此您的请求是HttpResponseMessage。

如果您不着急，建议您阅读这篇文章。 http://www.asp.net/web-api/overview/advanced/sending-html-form-data-part-2

如果确实有期限，建议您一次发布1个文件，并说明一次上传多个文件的局限性。 否则，请使用第三方API自行学习并进行反向工程。

Answer 2

我终于弄明白了。

我更改了Ajax调用，因为@ guest271314建议获取所有文件输入：

var files = $('.file');
if (files.length > 0) {
    if (window.FormData !== undefined) {
        var data = new FormData();
        for (var x = 0; x < files.length; x++) {
            data.append("file" + x, files[x].files[0]);
        }
         $.ajax({
            type: "POST",
            url: '/api/tripgroups',
            contentType: false,
            processData: false,
            data: data,
            success: function (result) {
                toastr.success('Trip Group was updated!');
            }
        });
    } else {
        alert("This browser doesn't support HTML5 file uploads!");
    }
}

而且主要问题在我的控制器上，因为我还有另一个参数

public async Task<HttpResponseMessage> Post(SomeClass param)

当我删除该参数时，它将正确接收文件。

我仍然不知道如何在同一请求中接收JSON对象和文件（如果可能的话），但我拆分为2个不同的控制器，效果很好。

谢谢大家的帮助！