如何通过jQuery Ajax将FormData发送至API控制器？

我帮你排查下代码里的问题，然后给出可以正常运行的实现方案：

一、修正前端jQuery代码 #

你的原代码有几处语法错误和潜在问题，修正后的版本如下：

$("#btnReject").click(function() { 
    // 先获取文件输入DOM元素，确保选择了文件
    const fileInputElement = $("#userfile")[0]; // 这里替换成你实际的文件输入框ID
    if (!fileInputElement || fileInputElement.files.length === 0) {
        alert("请先选择要上传的文件");
        return;
    }

    const uploadData = new FormData(); 
    uploadData.append('UserName', $("#txtUserName").val()); 
    uploadData.append("userfile", fileInputElement.files[0]); 

    $.ajax({ 
        url: '/Api/DynamicForm/Reject', // 开头加斜杠避免相对路径问题
        dataType: "json", 
        type: "post", // 原代码这里引号未闭合，已修正
        contentType: false, // 关键：不要让jQuery设置Content-Type，FormData会自动处理
        processData: false, // 关键：阻止jQuery转换FormData为字符串
        data: uploadData,
        // 可选：添加成功/失败回调
        success: function(res) {
            console.log("提交成功:", res);
            // 这里可以写成功后的页面逻辑，比如提示、刷新等
        },
        error: function(xhr, status, err) {
            console.error("提交失败:", err);
            alert("提交失败，请稍后重试");
        }
    }); 
}); // 原代码缺少这个闭合括号，已补上

前端关键注意点： #

• contentType: false：必须设置，因为FormData会自动生成包含boundary的multipart/form-data请求头，手动设置反而会导致服务器解析失败
• processData: false：禁止jQuery将FormData转换为URL编码的字符串，这是文件上传的必要配置
• 一定要确保正确获取文件输入元素，避免fileInputElement未定义的错误，最好增加文件选择判断

二、后端API控制器代码 #

ASP.NET Core API默认是JSON绑定，所以需要显式指定从表单接收数据，同时用IFormFile接收上传的文件：

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("Api/[controller]")]
public class DynamicFormController : ControllerBase
{
    [HttpPost("Reject")]
    // 使用[FromForm]告诉控制器从表单数据绑定模型
    public IActionResult Reject([FromForm] RejectRequest request)
    {
        // 验证参数
        if (string.IsNullOrEmpty(request.UserName))
        {
            return BadRequest("请输入用户名");
        }
        if (request.userfile == null || request.userfile.Length == 0)
        {
            return BadRequest("请上传文件");
        }

        // 示例：处理文件（这里以保存到服务器为例）
        var uploadPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads");
        // 确保目录存在
        if (!Directory.Exists(uploadPath))
        {
            Directory.CreateDirectory(uploadPath);
        }
        var filePath = Path.Combine(uploadPath, request.userfile.FileName);
        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            request.userfile.CopyTo(stream);
        }

        // 返回成功响应
        return Ok(new { 
            Message = "提交成功",
            UserName = request.UserName,
            FileName = request.userfile.FileName
        });
    }
}

// 定义接收表单数据的模型
public class RejectRequest
{
    public string UserName { get; set; }
    public IFormFile userfile { get; set; }
}

后端关键注意点： #

• 控制器要标记[ApiController]和正确的路由[Route("Api/[controller]")]
• 方法上添加[HttpPost("Reject")]对应前端的请求路径
• 使用[FromForm]属性告诉ASP.NET Core从表单数据中绑定RejectRequest模型
• 用IFormFile类型接收上传的文件，框架会自动处理文件流

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