如何通过AJAX将多文件以数组/列表形式传递至Controller

针对当前手动逐个处理文件上传的局限性，以下是优化方案，实现动态传递文件数组并在控制器自动绑定：

HTML代码优化 #

将文件输入框统一设置为同名集合，避免依赖固定id编号，方便批量处理：

@{
    for (int i = 0; i < Model.FileModel.Count; i++)
    {
        <input type="file" name="originalFiles" class="file-upload" id="originalFile@(i)" />
    }
}

• 统一设置name="originalFiles"，ASP.NET MVC会自动将同名的文件输入绑定到后端集合
• 添加class="file-upload"，方便通过类选择器批量获取所有文件输入元素

AJAX代码优化 #

通过FormData统一收集数据，批量处理文件验证和传递，无需按id逐个遍历：

var formData = new FormData();
// 追加masterRecordID参数
formData.append("masterRecordID", "你的主记录ID值");

// 获取所有文件上传控件
var fileInputs = $(".file-upload");
var allFilesSelected = true;

fileInputs.each(function() {
    var file = $(this)[0].files[0];
    if (!file) {
        allFilesSelected = false;
        return false; // 终止循环，提示用户
    }
    // 将文件追加到FormData，name与后端参数对应
    formData.append("originalFiles", file);
});

if (!allFilesSelected) {
    alert("必须上传所有文件");
    return false;
}

// 发送AJAX请求
$.ajax({
    url: "/你的控制器名/UploadFiles",
    type: "POST",
    data: formData,
    // 关键配置：禁用默认内容类型和数据处理，确保文件正确传递
    contentType: false,
    processData: false,
    success: function(response) {
        console.log("上传成功");
        // 处理成功逻辑
    },
    error: function(xhr, status, err) {
        console.error("上传失败:", err);
        // 处理错误逻辑
    }
});

• 使用FormData统一封装参数和文件，适配文件上传的二进制数据格式
• 通过类选择器批量获取文件控件，避免硬编码id编号，适配任意数量的文件输入
• 必须设置contentType: false和processData: false，防止jQuery自动格式化数据导致文件上传失效

C#控制器代码优化 #

将多个独立的文件参数替换为集合类型，自动绑定前端传递的文件数组：

[HttpPost]
public ActionResult UploadFiles(string masterRecordID, List<HttpPostedFileBase> originalFiles)
{
    // 检查是否有上传的文件
    if (originalFiles != null && originalFiles.Any())
    {
        foreach (var file in originalFiles)
        {
            // 跳过空文件（前端已验证，此处做双重保障）
            if (file == null || file.ContentLength <= 0)
                continue;

            // 示例：保存文件到服务器
            var fileName = Path.GetFileName(file.FileName);
            var savePath = Path.Combine(Server.MapPath("~/Uploads"), fileName);
            file.SaveAs(savePath);
        }
    }

    // 返回JSON结果（可根据需求调整返回类型）
    return Json(new { Success = true, Message = "文件上传完成" });
}

• 使用List<HttpPostedFileBase>接收文件集合，ASP.NET MVC会自动绑定前端传递的同名文件数组
• 遍历集合即可处理所有文件，无需新增参数适配更多文件数量，完全支持1~N个文件的动态场景

内容的提问来源于stack exchange，提问作者Frank Martin