本文详解如何使用 formdata 正确批量上传多个文件（如图片）到 php 后端，解决 `undefined index` 错误，并确保 php 能以数组形式接收和处理所有文件。
在 Web 开发中，单图上传容易实现，但批量上传多张图片常因前后端数据格式不匹配而失败。核心问题在于：JavaScript 的 FileList 对象不能直接作为单个值传入 FormData.append()；PHP 也需明确按数组方式接收文件字段。
✅ 正确做法：前端批量添加 + 后端按数组解析
首先，HTML 表单需启用 multiple 属性（你已正确使用）：
<input type="file" multiple name="images" id="images" accept="image/*" /> <button class="bouton" id="valider">上传</button>
关键在 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'] 是一个二维数组结构，而非单个文件信息：
立即学习“PHP免费学习笔记（深入）”；
<?php
header('Content-Type: application/json; charset=utf-8');
// 检查是否收到文件数组
if (!isset($_FILES['sample_images']) || empty($_FILES['sample_images']['name'])) {
echo json_encode(['error' => '未收到任何文件']);
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) 查看原始结构，确认字段名与结构一致。
通过以上结构化实现，即可稳定、可靠地完成多图批量上传——前端清晰组织数据，后端规范解析数组，真正实现“一次选择，多图上传”。
