17370845950

本文详解如何通过 formdata 批量上传多个文件（如图片）至 php，并正确接收和处理，解决单文件限制及 `undefined index` 错误问题。

在 Web 开发中，实现多图上传是常见需求，但初学者常因前后端数据结构不匹配而失败——例如 JavaScript 传入 FileList 对象后，PHP 却无法通过 $_FILES['sample_image'] 访问，报出 Notice: Undefined index。根本原因在于：HTML 文件输入的 multiple 属性仅影响前端选择行为，后端接收仍需显式声明数组形式的字段名，且 JavaScript 必须逐个 append() 文件，并使用带 [] 的键名。

✅ 正确的前后端协作方式

1. HTML 端：启用多选

上传

⚠️ 注意：name="images" 仅用于表单提交时的标识，实际 JS 中无需依赖该 name；accept="image/*" 可提升用户体验，限制文件类型。

2. JavaScript 端：遍历 FileList 并追加为数组字段

const sampleImageInput = document.getElementById('images');
const submitBtn = document.getElementById('valider');

submitBtn.addEventListener('click', () => {
    if (sampleImageInput.files.length === 0) {
        alert('请先选择图片！');
        return;
    }
    uploadImages(sampleImageI
nput.files); // 传入整个 FileList
});

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

    // 关键：使用 'sample_images[]' 作为键名，让 PHP 自动解析为数组
    for (let i = 0; i < files.length; i++) {
        formData.append('sample_images[]', files[i]);
    }

    fetch('http://your-domain.com/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);
    });
};

3. PHP 端：按数组方式接收并验证

 '未收到有效文件数组']);
    exit;
}

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

$response = ['received' => $fileCount, 'details' => []];

for ($i = 0; $i < $fileCount; $i++) {
    // 验证单个文件是否上传成功
    if ($files['error'][$i] === UPLOAD_ERR_OK) {
        $originalName = $files['name'][$i];
        $tmpPath = $files['tmp_name'][$i];
        $size = $files['size'][$i];

        $response['details'][] = [
            'name' => $originalName,
            'size' => $size . ' bytes',
            'type' => $files['type'][$i],
            'tmp_path' => $tmpPath
        ];
    } else {
        $response['details'][] = [
            'name' => $files['name'][$i],
            'error' => upload_strerror($files['error'][$i])
        ];
    }
}

echo json_encode($response, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
?>

? 关键要点总结

• 命名一致性：JS 中 form_data.append('sample_images[]', file) 的 [] 是 PHP 将其识别为数组的必要语法，缺一不可；
• 不要手动设置 Content-Type：FormData 与 fetch 组合时，浏览器会自动生成正确的 multipart/form-data 头及 boundary，手动设置反而导致解析失败；
• PHP 接收逻辑不同：多文件上传后，$_FILES['sample_images'] 是一个二维关联数组（含 name, type, tmp_name, error, size 五个子数组），而非单个文件对象；
• 健壮性建议：始终检查 $_FILES[...]['error'] 值，区分 UPLOAD_ERR_OK 与其他错误码（如 UPLOAD_ERR_NO_FILE）；
• 安全提醒：生产环境务必校验文件类型、大小、扩展名，并将临时文件移至安全目录，避免直接信任客户端数据。

通过以上结构化实现，即可稳定支持任意数量的图片批量上传，兼顾兼容性与可维护性。