本文详解如何通过 formdata 正确批量上传多个文件（如图片）至 php，解决 `$_files` 无法接收数组索引的常见错误，并提供完整、可运行的前后端代码示例。
在 Web 开发中，单图上传很常见，但实际业务中往往需要支持多图批量上传（例如商品图集、相册上传等）。你遇到的问题非常典型：当使用 选择多个文件后，若直接将 files 对象整体传入 FormData.append()，PHP 端会因键名不匹配而报错 Notice: Undefined index: sample_image——这是因为 $_FILES 是一个关联数组结构，它要求每个上传字段必须以 name="xxx[]" 形式声明，且 JS 端需对应使用带 [] 的键名逐个追加文件。
✅ 正确做法：JS 端循环添加 + PHP 端适配数组接收
首先，确保 HTML 中启用多选：
接着，JS 需遍历 FileList 并为每个文件调用 form_data.append('sample_images[]', file) —— 关键在于 'sample_images[]' 中的 []，它告诉 PHP 将该字段解析为数组：
const sample_image = document.getElementById('images');
const valider = document.getElementById('valider');
valider.addEventListener('click', () => {
if (sample_image.files.length === 0) {
alert('请至少选择一张图片');
return;
}
upload_image(sample_image.files); // 传入整个 FileList
});
const upload_image = (files) => {
const form_data = new FormData();
// 逐个添加文件，使用带 [] 的字段名
for (let i = 0; i < files.length; i++) {
form_data.append('sample_images[]', files[i]); // 注意：[] 不可省略！
}
fetch(host + "add.php", {
method: "POST",
body: form_data
// ⚠️ 不要设置 Content-Type！浏览器会自动设置 multipart/form-data 及正确 boundary
})
.then(response => response.json())
.then(data => {
console.log('上传成功:', data);
})
.catch(err => {
console.error('上传失败:', err);
});
};? PHP 端：按数组方式处理 $_FILES
PHP 接收时，$_FILES['sample_images'] 将是一个二维数组（与单文件的扁平结构不同），结构如下：
立即学习“PHP免费学习笔记（深入）”；
$_FILES['sample_images'] = [
'name' => ['1.jpg', '2.png', '3.gif'],
'type' => ['image/jpeg', 'image/png', 'image/gif'],
'tmp_name' => ['/tmp/phpabc123', '/tmp/phpdef456', '/tmp/phpghi789'],
'error' => [0, 0, 0],
'size' => [102400, 204800, 51200]
];因此，需用 foreach 按索引遍历处理每张图：
'未收到任何文件']);
exit;
}
$files = $_FILES['sample_images'];
$uploadDir = __DIR__ . '/uploads/';
mkdir($uploadDir, 0755, true);
$results = [];
for ($i = 0; $i < count($files['name']); $i++) {
$name = $files['name'][$i];
$tmpName = $files['tmp_name'][$i];
$error = $files['error'][$i];
$size = $files['size'][$i];
if ($error === UPLOAD_ERR_OK && $size > 0) {
$targetPath = $uploadDir . basename($name);
if (move_uploaded_file($tmpName, $targetPath)) {
$results[] = ['success' => true, 'filename' => $name, 'size' => $size];
} else {
$results[] = ['success' => false, 'filename' => $name, 'error' => '保存失败'];
}
} else {
$results[] = ['success' => false, 'filename' => $name, 'error' => '上传错误码: ' . $error];
}
}
echo json_encode(['uploaded' => $results]);
?>⚠️ 重要注意事项
- 不要手动设置 Content-Type：fetch 发送 FormData 时，切勿显式设置 headers: {'Content-Type': 'multipart/form-data'}，否则会破坏 boundary，导致 PHP 无法解析。
- PHP 配置检查：确保 php.ini 中 file_uploads = On、post_max_size 和 upload_max_filesize 足够大（如 20M），并重启 Web 服务。
- 安全建议：生产环境务必校验 $_FILES['...']['type']（仅作参考）、扩展名、MIME 类型（用 finfo_file()）、文件内容（防恶意脚本），并重命名文件避免路径遍历。
- 用户体验优化：可增加上传进度条、拖拽支持、预览缩略图、并发控制（如 Promise.all() 分批上传）等。
掌握这一模式后，你不仅能上传多图，还可轻松扩展为混合表单（如同时传文本字段 + 多文件）：只需在 FormData 中 append('title', 'xxx') 即可，PHP 端通过 $_POST 获取。
