如何通过jQuery Ajax将多个表单传入FormData？

你之前的代码错误在于直接将整个表单DOM元素添加到FormData中，这不会把表单的字段（包括文件）解析到FormData里，导致服务器无法读取数据。下面是两种可行的解决方法：

方法1：遍历所有表单控件逐个添加 #

这种方法可以精确控制每个字段的添加，适合需要自定义处理的场景：

var dataString = new FormData();

// 封装函数处理单个表单的字段添加
function addFormToFormData(formSelector, formData) {
    $(formSelector).find('input, select, textarea, file').each(function() {
        // 处理文件输入，支持多文件上传
        if (this.type === 'file') {
            for (let i = 0; i < this.files.length; i++) {
                formData.append(this.name, this.files[i]);
            }
        } else {
            // 普通输入字段直接添加值
            formData.append(this.name, $(this).val());
        }
    });
}

// 依次添加三个表单的数据
addFormToFormData('#step1', dataString);
addFormToFormData('#step2', dataString);
addFormToFormData('#step3', dataString);

// 发送AJAX请求
$.ajax({
    type: "POST",
    url: "form handling/send.php",
    data: dataString,
    processData: false,
    contentType: false,
    success: function(data, status) {
        $("#sub").html("Sent!");
    },
    error: function(data, status) {
        $("#sub").html("failed!");
    }
});

方法2：利用FormData构造函数合并表单 #

这种方法更简洁，直接利用FormData的原生能力初始化单表单，再合并其他表单的字段：

// 用第一个表单初始化FormData
var dataString = new FormData($('#step1')[0]);

// 合并step2表单的数据
var step2Data = new FormData($('#step2')[0]);
for (const [key, value] of step2Data.entries()) {
    dataString.append(key, value);
}

// 合并step3表单的数据
var step3Data = new FormData($('#step3')[0]);
for (const [key, value] of step3Data.entries()) {
    dataString.append(key, value);
}

// 发送AJAX请求（和之前一致）
$.ajax({
    type: "POST",
    url: "form handling/send.php",
    data: dataString,
    processData: false,
    contentType: false,
    success: function(data, status) {
        $("#sub").html("Sent!");
    },
    error: function(data, status) {
        $("#sub").html("failed!");
    }
});

服务器端（send.php）处理示例 #

接收表单数据和文件的基本逻辑：

// 接收普通文本字段
$step1Field = isset($_POST['step1_field_name']) ? $_POST['step1_field_name'] : '';
$step2Field = isset($_POST['step2_field_name']) ? $_POST['step2_field_name'] : '';

// 处理文件上传
if (isset($_FILES['file_input_name'])) {
    $uploadFile = $_FILES['file_input_name'];
    // 检查上传是否成功
    if ($uploadFile['error'] === UPLOAD_ERR_OK) {
        $targetDir = 'uploads/';
        // 确保目录存在
        if (!is_dir($targetDir)) {
            mkdir($targetDir, 0755, true);
        }
        $targetPath = $targetDir . basename($uploadFile['name']);
        // 移动上传文件到目标位置
        move_uploaded_file($uploadFile['tmp_name'], $targetPath);
    }
}

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