PHP动态添加Floor Plan表单提交仅存最后一组的问题解决

问题核心是表单字段名未设置为数组格式，每次添加新组时，重复的字段名（如floor_plan_photo、floor_plan_name）会让PHP的$_POST和$_FILES只保留最后一组的值，前面的都会被覆盖。以下是具体修复步骤：

1. 修改表单字段为数组格式 #

不管是初始表单组还是JS动态添加的新组，都要把字段的name属性改成数组形式，确保所有组的数据能被PHP完整接收：

• 图片字段：name="floor_plan_photo[]"
• 名称字段：name="floor_plan_name[]"

修改后的HTML初始组示例 #

<div id="floor-plans-container">
  <div class="floor-plan-group">
    <input type="file" name="floor_plan_photo[]" accept="image/*" required>
    <input type="text" name="floor_plan_name[]" placeholder="Floor Plan Name" required>
    <button type="button" class="remove-group">Remove</button>
  </div>
</div>
<button type="button" id="add-floor-plan">Add Floor Plan</button>

修改动态添加字段的JS代码 #

确保新创建的字段也使用数组名称：

document.getElementById('add-floor-plan').addEventListener('click', function() {
  const groupContainer = document.createElement('div');
  groupContainer.className = 'floor-plan-group';
  groupContainer.innerHTML = `
    <input type="file" name="floor_plan_photo[]" accept="image/*" required>
    <input type="text" name="floor_plan_name[]" placeholder="Floor Plan Name" required>
    <button type="button" class="remove-group">Remove</button>
  `;
  // 绑定移除按钮事件
  groupContainer.querySelector('.remove-group').addEventListener('click', function() {
    groupContainer.remove();
  });
  document.getElementById('floor-plans-container').appendChild(groupContainer);
});

2. 调整PHP保存逻辑 #

现在$_FILES['floor_plan_photo']和$_POST['floor_plan_name']都是数组，需要循环遍历每个元素，逐一处理每组Floor Plan：

修改后的PHP代码示例 #

// 配置上传目录（确保目录存在且可写）
$uploadDir = 'uploads/floor-plans/';
if (!is_dir($uploadDir)) {
  mkdir($uploadDir, 0755, true);
}

// 遍历所有Floor Plan组
$totalGroups = count($_POST['floor_plan_name']);
for ($i = 0; $i < $totalGroups; $i++) {
  $planName = trim($_POST['floor_plan_name'][$i]);
  $fileData = $_FILES['floor_plan_photo'];

  // 跳过空组或上传失败的项
  if (empty($planName) || $fileData['error'][$i] !== UPLOAD_ERR_OK) {
    continue;
  }

  // 生成新文件名（用Floor Plan Name重命名，避免重名）
  $fileExt = pathinfo($fileData['name'][$i], PATHINFO_EXTENSION);
  $newFileName = $planName . '.' . $fileExt;
  $targetPath = $uploadDir . $newFileName;

  // 处理重名文件：添加数字后缀
  $counter = 1;
  while (file_exists($targetPath)) {
    $newFileName = $planName . '_' . $counter . '.' . $fileExt;
    $targetPath = $uploadDir . $newFileName;
    $counter++;
  }

  // 移动上传文件到目标目录
  if (move_uploaded_file($fileData['tmp_name'][$i], $targetPath)) {
    // 这里可添加数据库存储逻辑，比如保存$newFileName和$planName
    echo "Floor Plan '$planName' 保存成功<br>";
  } else {
    echo "Floor Plan '$planName' 保存失败<br>";
  }
}

关键说明 #

• 上传文件的$_FILES结构变化：修改后$_FILES['floor_plan_photo']的每个子属性（name、tmp_name、error等）都是数组，对应每组的上传文件。
• 循环时要同步$_POST和$_FILES的索引，保证每组的名称和图片一一对应。
• 增加了重名文件处理逻辑，避免覆盖已有的Floor Plan图片。

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