使用jQuery Ajax+FormData上传文件时POST未携带文件的问题排查

嘿，我帮你找出问题所在了，咱们一步步拆解：

核心错误点 #

1. 误将FileList对象存入数组，而非单个File
   你代码里files.push($("#FrontFile" + i).get(0).files)，这里的files是一个FileList对象（类似数组的文件集合），不是单个文件。直接把这个集合传给data.append，后端根本无法识别这种格式，自然接收不到文件。

2. 循环变量与函数参数重名，导致逻辑混乱
   函数参数是i，你内部循环又用了var i = 0，这会直接覆盖外部的i值，导致文件收集的逻辑完全出错。

修正后的前端代码 #

function UploadFile(fileIndex) { // 修改参数名，避免和内部循环变量冲突
    var data = new FormData();
    var fileInputs = [];

    // 根据PrintingSide的值，收集对应的文件输入框DOM元素
    if ($('#PrintingSide').val() === "1") {
        fileInputs.push($("#FrontFile" + fileIndex).get(0));
    } else {
        fileInputs.push($("#FrontFile" + fileIndex).get(0));
        fileInputs.push($("#BackFile" + fileIndex).get(0));
    }

    // 遍历每个文件输入框，处理其中的单个文件
    fileInputs.forEach(function(input) {
        // 每个输入框的files是FileList，遍历取出单个文件
        for (var j = 0; j < input.files.length; j++) {
            var file = input.files[j];
            data.append("uploadFiles", file); // 键名可自定义，后端通过Request.Files获取即可
        }
    });

    $.ajax({
        type: "post",
        url: "@Url.Content("~/UserEstimation/UploadMultipleFiles")",
        processData: false,
        contentType: false,
        data: data,
        success: function (response) {
            console.log("上传成功:", response);
            // 这里可以添加上传成功后的UI提示逻辑
        },
        error: function(xhr) {
            console.error("上传失败:", xhr);
        }
    });
}

后端代码优化建议 #

public ActionResult UploadMultipleFiles() {
    if (Request.Files.Count == 0) {
        return Json(new { success = false, message = "未检测到上传文件" });
    }

    for (int i = 0; i < Request.Files.Count; i++) {
        var uploadedFile = Request.Files[i];
        // 确保文件非空再处理
        if (uploadedFile != null && uploadedFile.ContentLength > 0) {
            // 示例：保存文件到服务器指定目录
            // string savePath = Server.MapPath("~/Uploads/" + uploadedFile.FileName);
            // uploadedFile.SaveAs(savePath);
        }
    }

    return Json(new { success = true, message = "文件上传完成" });
}

额外注意事项 #

• 确保页面上的文件输入框id格式正确（比如FrontFile1、BackFile2），和你传入的fileIndex参数对应。
• 不需要给包裹的表单设置enctype="multipart/form-data"，FormData已经自动处理了这个需求。
• 确认你的Controller Action没有被[HttpGet]标记，必须允许POST请求。

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