本文详解如何通过 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(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 端：按数组方式接收并验证
'未收到有效文件数组']); 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）；
- 安全提醒：生产环境务必校验文件类型、大小、扩展名，并将临时文件移至安全目录，避免直接信任客户端数据。
通过以上结构化实现，即可稳定支持任意数量的图片批量上传，兼顾兼容性与可维护性。