javascript - 带文件上传的 FormData Ajax 请求

Question

我一直在尝试将文件数组上传到 MVC Controller ，但到目前为止还没有成功，因为 HttpPostedFileBase[] 结果 Controller 响应方法上为 null。

首先，我将多个上传的文件保存到一个变量中，如下所示:

$("#file").change(function () {
    fileArray[fileId] = this.files[0];
    fileId++;
});

将文件附加到数组的效果很好(使用 Chrome 调试器检查)。

稍后，当用户提交图像时，我将数据附加到 FormData 对象中:

var data = new FormData();

$.each(fileArray, function (key, value) {
    data.append('files[]', value);
});

然后我终于进行了 AJAX 调用:

    var serviceURL = '@Url.Action("OpenMaterialRequestSubmit", "OpenMaterialRequest")';

    $.ajax({
        type: "POST",
        url: serviceURL,
        data: data,
        cache: false,
        processData: false,
        contentType: false,
        success: successFunc,
        error: errorFunc
    });

由我的 Controller 方法接收，具有以下 header :

[HttpPost]
public async Task<ActionResult> OpenMaterialRequestSubmit(HttpPostedFileBase[] files)

files，正如我已经说过的，始终为null。

在 Google Chrome 调试器上请求有效负载:

------WebKitFormBoundaryniIQHyAUAYUfecDX
Content-Disposition: form-data; name="files[]"; filename="Screen Shot 2015-12-03 at 9.19.02 AM.png"
Content-Type: image/png


------WebKitFormBoundaryniIQHyAUAYUfecDX--

有什么线索吗？

Answer 1

您需要将属性名称files[]更改为files

$.each(fileArray, function (key, value) {
    data.append('files', value);
});

旁注:另一种方法是直接将文件添加到 .change 事件中的 FormData 对象

var data = new FormData();
$("#file").change(function () {
    data.append('files', $(this).get(0).files[0]);
});