Ajax.BeginForm无法向Controller提交文件（MVC邮件表单场景）

这个问题很常见——Ajax.BeginForm默认并不支持通过Ajax上传文件，因为它底层的实现逻辑没办法处理multipart/form-data格式的文件数据。不过别担心，我们可以用原生的FormData API配合手动Ajax请求来解决这个问题，具体步骤如下：

1. 调整表单标记 #

首先把Ajax.BeginForm替换成普通的Html.BeginForm（或者直接写原生form标签），因为我们要自己接管提交逻辑：

@using (Html.BeginForm("sendEmail", "communication", FormMethod.Post, new { id = "communicationForm", enctype = "multipart/form-data" }))
{
    @Html.TextAreaFor(m => m._Email.Body, new { @class = "form-control editor", style = "overflow:scroll; max-height:300px", name = "emailbody", id = "emailbody" })
    <input type="file" id="fileUploader" name="fileUploader" multiple>
    <!-- 这里可以添加提交按钮 -->
    <button type="submit" class="btn btn-primary">发送邮件</button>
}
<!-- 用来展示返回消息的容器 -->
<div id="emailMessage"></div>

2. 编写手动Ajax提交逻辑 #

用JavaScript（这里用jQuery示例）拦截表单的提交事件，使用FormData来封装表单数据（包括文件），然后发送Ajax请求：

$(document).ready(function() {
    $('#communicationForm').on('submit', function(e) {
        // 阻止默认的表单提交行为
        e.preventDefault();
        
        // 调用你的OnBegin方法，如果返回false就终止提交流程
        if (!onBeginFun()) {
            return;
        }
        
        // 创建FormData对象，自动包含表单内的所有数据（包括选中的文件）
        const formData = new FormData(this);
        
        // 发送Ajax请求
        $.ajax({
            url: this.action,
            type: this.method,
            data: formData,
            // 关键设置：不要处理数据，让FormData保持原始格式
            processData: false,
            // 关键设置：不要手动设置Content-Type，浏览器会自动添加正确的multipart/form-data头
            contentType: false,
            success: function(response) {
                // 请求成功后更新指定容器的内容
                $('#emailMessage').html(response);
            },
            error: function(xhr, status, err) {
                // 处理错误情况
                $('#emailMessage').html(`发送失败：${err}`);
            }
        });
    });
});

3. 调整Controller的Action方法 #

确保你的Action能正确接收文件参数，示例如下：

[HttpPost]
public ActionResult sendEmail(YourViewModel model, IEnumerable<HttpPostedFileBase> fileUploader)
{
    // 处理邮件内容逻辑
    if (!string.IsNullOrEmpty(model._Email.Body))
    {
        // 这里写你的邮件正文处理逻辑
    }
    
    // 处理上传的文件
    if (fileUploader != null)
    {
        foreach (var file in fileUploader)
        {
            if (file != null && file.ContentLength > 0)
            {
                // 这里可以写保存文件或附加到邮件的逻辑
                var fileName = Path.GetFileName(file.FileName);
                var savePath = Path.Combine(Server.MapPath("~/Uploads"), fileName);
                file.SaveAs(savePath);
            }
        }
    }
    
    // 返回要显示的消息
    return Content("邮件已成功发送！");
}

为什么原来的Ajax.BeginForm不行？ #

Ajax.BeginForm生成的脚本会把表单数据序列化成键值对的格式，这种方式无法处理二进制的文件数据。而FormData API是HTML5提供的专门用于封装multipart/form-data格式数据的对象，能正确包含文件内容，让Ajax请求支持文件上传。

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