将多个文件输入作为jQuery表单数据传递到剃须刀页面

Question

我有多个表单文件输入。前两个文件输入接受单个文件，第三个文件接受多个文件。该请求未转发给我的操作。

在发送请求时，我收到404错误。传递多个文件输入时我做错了什么？我是新手，所以我不确定自己缺少什么。请指导我解决此问题。谢谢。

剃刀页面html：

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<form method="post" enctype="multipart/form-data">
    <div class="row">
        <div class="col-md-12">
            <input type="file" id="file1" accept=".csv" name="files[0]" class="form-control" />
            <input type="file" id="file2" accept=".txt" name="files[1]" class="form-control" />
            <input type="file" id="fUpload" name="files[2]" accept=".dat" multiple class="form-control" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" style="padding-top:10px;">
            <input type="button" id="btnUpload" value="Upload" />
        </div>
    </div>
</form>

剃刀页面操作代码：

[HttpPost]
public ActionResult OnPostUpload(List<IFormFile> files)
{

    if (files != null && files.Count > 0)
    {
        string folderName = "Upload";
        string webRootPath = _hostingEnvironment.WebRootPath;
        string newPath = Path.Combine(webRootPath, folderName);
        if (!Directory.Exists(newPath))
        {
            Directory.CreateDirectory(newPath);
        }

        foreach (IFormFile item in files)
        {
            if (item.Length > 0)
            {
                string fileName = ContentDispositionHeaderValue.Parse(item.ContentDisposition).FileName.Trim('"');
                string fullPath = Path.Combine(newPath, fileName);

                using (var stream = new FileStream(fullPath, FileMode.Create))
                {
                    item.CopyTo(stream);
                }
            }
        }

        return this.Content("Success");
    }

    return this.Content("Fail");
}

jQuery请求：

$(document).ready(function () {
    $('#btnUpload').on('click', function () {
        var file1 = $('#file1');
        var file2 = $('#file2');
        var files = $('#fUpload').prop("files");
        var fdata = new FormData();

        fdata.append("files", file1[0].files[0]);
        fdata.append("files", file2[0].files[0]);


        for (var i = 0; i < files.length; i++) {
            fdata.append("files", files[i]);
        }

        if (files.length > 0) {
            $.ajax({
                type: "POST",
                url: "/Index?handler=Upload",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                data: fdata,
                contentType: false,
                processData: false,
                success: function (response) {
                    alert('File Uploaded Successfully.')
                }
            });
        }
        else {
            alert('Please select a file.')
        }
    })
});