如何用Ajax jQuery结合JSON/Form Data上传含嵌套对象的多文件

因为File对象无法直接序列化为JSON字符串，所以必须基于FormData构建请求数据，通过特定格式的键名映射嵌套的JSON结构。以下是具体实现方案：

核心思路 #

把嵌套对象结构转换成FormData可识别的键值对：

• 主对象字段直接用键名，比如field1、field2
• 子数组元素用childObj[索引].字段名格式，比如childObj[0].file、childObj[1].field1，后端可自动解析为对应嵌套结构

具体实现代码 #

1. HTML结构示例（含动态添加子项） #

<!-- 主字段输入 -->
<input type="text" id="field1" value="test">
<input type="text" id="field2" value="test">

<!-- 子对象容器 -->
<div id="childContainer">
  <!-- 初始子项模板 -->
  <div class="childItem">
    <input type="text" class="childField1" value="test">
    <input type="text" class="childField2" value="test">
    <input type="file" class="childFile">
  </div>
</div>
<button id="addChild">添加子项</button>
<button id="submit">提交上传</button>

2. JavaScript代码（jQuery实现） #

// 动态添加子项逻辑
$('#addChild').click(function() {
  const childItemHtml = `
    <div class="childItem">
      <input type="text" class="childField1" value="test">
      <input type="text" class="childField2" value="test">
      <input type="file" class="childFile">
    </div>
  `;
  $('#childContainer').append(childItemHtml);
});

// 提交上传逻辑
$('#submit').click(function() {
  const formData = new FormData();

  // 添加主对象字段
  formData.append('field1', $('#field1').val());
  formData.append('field2', $('#field2').val());

  // 遍历所有动态子对象，添加到FormData
  $('.childItem').each(function(index) {
    const $item = $(this);
    // 子对象普通字段
    formData.append(`childObj[${index}].field1`, $item.find('.childField1').val());
    formData.append(`childObj[${index}].field2`, $item.find('.childField2').val());
    // 子对象文件（仅当选择了文件时添加）
    const file = $item.find('.childFile')[0].files[0];
    if (file) {
      formData.append(`childObj[${index}].file`, file);
    }
  });

  // 发送Ajax请求
  $.ajax({
    url: '/your-upload-api', // 替换为你的后端接口地址
    type: 'POST',
    data: formData,
    processData: false, // 必须：禁止处理FormData
    contentType: false, // 必须：让浏览器自动设置Content-Type
    success: function(res) {
      console.log('上传成功', res);
    },
    error: function(xhr, status, err) {
      console.error('上传失败', err);
    }
  });
});

后端接收示例（PHP为例） #

后端可通过$_POST和$_FILES直接获取数据，PHP会自动解析childObj[0].field1这类格式为数组：

// 读取主字段
$field1 = $_POST['field1'];
$field2 = $_POST['field2'];

// 解析子对象数组
$childObj = [];
foreach ($_POST['childObj'] as $idx => $childData) {
  $child = [
    'field1' => $childData['field1'],
    'field2' => $childData['field2'],
    'file_name' => $_FILES['childObj']['name'][$idx],
    'file_tmp' => $_FILES['childObj']['tmp_name'][$idx]
  ];
  // 此处可添加文件保存逻辑
  $childObj[] = $child;
}

注意事项 #

• 确保文件输入标签已选择文件，否则对应file字段不会被加入FormData
• 不同后端语言的嵌套结构解析规则略有差异，比如Java Spring可通过@ModelAttribute配合实体类接收
• 若上传文件较多，需调整后端的上传大小限制配置

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