本文详解如何通过 formdata 批量上传多个文件（如图片）至 php，并正确接收和处理，解决单文件限制及 `undefined index` 错误问题。
在 Web 开发中，实现多图上传是常见需求，但初学者常因前后端数据结构不匹配而失败——例如 JavaScript 传入 FileList 对象后，PHP 却无法通过 $_FILES['sample_image'] 访问，报出 Notice: Undefined index。根本原因在于：HTML 文件输入的 multiple 属性仅影响前端选择行为，后端接收仍需显式声明数组形式的字段名，且 JavaScript 必须逐个 append() 文件，并使用带 [] 的键名。
✅ 正确的前后端协作方式
1. HTML 端：启用多选
<input type="file" multiple name="images" id="images" accept="image/*" /> <button class="bouton" id="valider">上传</button>
⚠️ 注意：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(sampleImageInput.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 端：按数组方式接收并验证
<?php
header('Content-Type: application/json; charset=utf-8');
// 检查是否收到文件数组
if (!isset($_FILES['sample_images']) || !is_array($_FILES['sample_images']['name'])) {
echo json_encode(['error' => '未收到有效文件数组']);
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）；
- 安全提醒：生产环境务必校验文件类型、大小、扩展名，并将临时文件移至安全目录，避免直接信任客户端数据。
通过以上结构化实现，即可稳定支持任意数量的图片批量上传，兼顾兼容性与可维护性。
