17370845950

本文详解如何使用 formdata 正确批量上传多个文件（如图

片）到 php 后端，解决 `undefined index` 错误，并确保 php 能以数组形式接收和处理所有文件。

在 Web 开发中，单图上传容易实现，但批量上传多张图片常因前后端数据格式不匹配而失败。核心问题在于：JavaScript 的 FileList 对象不能直接作为单个值传入 FormData.append()；PHP 也需明确按数组方式接收文件字段。

✅ 正确做法：前端批量添加 + 后端按数组解析

首先，HTML 表单需启用 multiple 属性（你已正确使用）：

上传

关键在 JavaScript 端：必须遍历 files 并逐个 append，且字段名末尾加 []（方括号），这是 PHP 识别为数组的约定语法：

const upload_image = (files) => {
  const formData = new FormData();

  // 遍历所有选中的文件
  for (let i = 0; i < files.length; i++) {
    // 注意：字段名必须为 'sample_images[]'（含 []），否则 PHP 不会视为数组
    formData.append('sample_images[]', files[i]);
  }

  fetch(host + "add.php", {
    method: "POST",
    body: formData
    // ⚠️ 不要设置 Content-Type！让浏览器自动设置 multipart/form-data 及 boundary
  })
  .then(response => response.json())
  .then(data => console.log("上传成功:", data))
  .catch(err => console.error("上传失败:", err));
};

// 绑定事件（支持多选）
document.getElementById('valider').addEventListener('click', () => {
  const input = document.getElementById('images');
  if (input.files.length > 0) {
    upload_image(input.files); // 传入整个 FileList，非 files[0]
  } else {
    alert("请先选择图片");
  }
});

? PHP 端接收与验证（add.php）

PHP 必须按数组方式访问 $_FILES。注意：$_FILES['sample_images'] 是一个二维数组结构，而非单个文件信息：

 '未收到任何文件']);
    exit;
}

$files = $_FILES['sample_images'];
$fileCount = count($files['name']);

// 构建标准化的文件信息数组（便于前端理解）
$result = [];
for ($i = 0; $i < $fileCount; $i++) {
    if ($files['error'][$i] === UPLOAD_ERR_OK) {
        $result[] = [
            'name' => $files['name'][$i],
            'type' => $files['type'][$i],
            'size' => $files['size'][$i],
            'tmp_name' => $files['tmp_name'][$i],
            'error' => $files['error'][$i]
        ];
    } else {
        $result[] = [
            'name' => $files['name'][$i],
            'error' => $files['error'][$i],
            'message' => upload_err_to_string($files['error'][$i])
        ];
    }
}

echo json_encode(['received' => $fileCount, 'files' => $result]);

function upload_err_to_string($code) {
    switch ($code) {
        case UPLOAD_ERR_INI_SIZE: return '文件超过 php.ini 中 upload_max_filesize 限制';
        case UPLOAD_ERR_FORM_SIZE: return '文件超过表单 MAX_FILE_SIZE 限制';
        case UPLOAD_ERR_PARTIAL: return '文件只有部分被上传';
        case UPLOAD_ERR_NO_FILE: return '没有文件被上传';
        case UPLOAD_ERR_NO_TMP_DIR: return '缺少临时文件夹';
        case UPLOAD_ERR_CANT_WRITE: return '文件写入失败';
        case UPLOAD_ERR_EXTENSION: return '文件上传被扩展名阻止';
        default: return '未知错误';
    }
}
?>

⚠️ 常见错误与注意事项

• ❌ 错误字段名：form_data.append('sample_image', files) 或 form_data.append('sample_images', files) → PHP 收到的是单个值或空，无法解析为数组。✅ 正确写法：'sample_images[]'（带 []）。
• ❌ 手动设置 Content-Type：fetch 发送 FormData 时，切勿手动设置 headers: {'Content-Type': '...'}，否则会破坏 multipart/form-data 的 boundary，导致后端无法解析。
• ✅ 安全建议：PHP 端务必校验 $_FILES['...']['error']，过滤非法上传；生产环境应限制文件类型、大小，并重命名文件避免路径遍历或执行风险。
• ? 调试技巧：在 PHP 中用 var_dump($_FILES) 查看原始结构，确认字段名与结构一致。

通过以上结构化实现，即可稳定、可靠地完成多图批量上传——前端清晰组织数据，后端规范解析数组，真正实现“一次选择，多图上传”。