本文详解如何通过 HTML 文件输入控件（支持目录上传）结合 FormData 和 PHP，正确批量上传文件夹内全部图片，并解决常见的 $_FILES 数组为空或结构误读问题。
本文详解如何通过 html 文件输入控件（支持目录上传）结合 formdata 和 php，正确批量上传文件夹内全部图片，并解决常见的 `$_files` 数组为空或结构误读问题。
在 Web 开发中，实现“一键上传整个文件夹”功能需依赖浏览器对 webkitdirectory（Chrome/Safari/Edge）和 directory（部分旧版）属性的支持。但仅添加该属性并不足够——前后端数据组织方式若不匹配，极易导致 $_FILES['flist'] 为空或解析失败。核心问题在于：FormData.append() 不能直接传递 FileList 对象，且 PHP 处理多文件上传时，$_FILES 是按字段名维度组织的二维关联数组，而非扁平数组。
✅ 正确的前端实现
需遍历 files 列表，逐个 append 并使用方括号语法 flist[] 声明为数组字段：
<input type="file" class="inpfile" id="inpfo" webkitdirectory directory multiple>
$('#inpfo').on('change', function () {
const files = this.files; // FileList object
const fd = new FormData();
// 关键：逐个添加，且字段名带 [] 表示数组
for (let i = 0; i <blockquote>
<p>⚠️ 注意事项：</p>
<ul>
<li>
<code>webkitdirectory</code> 和 <code>directory</code> 属性仅在用户主动选择<strong>文件夹</strong>时生效（非普通文件选择）；</li>
<li>浏览器兼容性：Firefox 不支持 <code>webkitdirectory</code>，建议降级为普通多选（<code>multiple</code>），或使用 <a href="https://www.php.cn/link/425fbd8cd12d7ed14264bdd50d8da0b1" rel="nofollow" target="_blank">Webkit Directory Upload Polyfill</a>；</li>
<li>图片类型过滤（如 <code>files[i].type.startsWith('image/')</code>）可提升健壮性，避免非图片文件触发后端错误。</li>
</ul>
</blockquote><h3>✅ 正确的 PHP 后端处理</h3><p>PHP 的 <code>$_FILES['flist']</code> 是一个<strong>按上传字段组织的超全局数组</strong>，结构如下：</p><pre class="brush:php;toolbar:false;">$_FILES['flist'] = [
'name' => ['img1.jpg', 'img2.png', ...],
'type' => ['image/jpeg', 'image/png', ...],
'tmp_name' => ['/tmp/phpabc123', '/tmp/phpdef456', ...],
'error' => [0, 0, ...],
'size' => [12345, 67890, ...]
];因此，不能直接 foreach($_FILES['flist']) —— 这会遍历 'name', 'tmp_name' 等子键，而非单个文件。正确做法是遍历 $_FILES['flist']['tmp_name']，并同步索引访问其他字段：
<?php // upload.php
if (!isset($_FILES['flist']) || !is_array($_FILES['flist']['tmp_name'])) {
die('No valid files uploaded.');
}
$uploadsDir = 'test/';
if (!is_dir($uploadsDir) && !mkdir($uploadsDir, 0755, true)) {
die('Failed to create upload directory.');
}
$errors = [];
$successCount = 0;
foreach ($_FILES['flist']['tmp_name'] as $index => $tmpName) {
// 检查上传是否成功
if ($tmpName === '' || $_FILES['flist']['error'][$index] !== UPLOAD_ERR_OK) {
$errors[] = "File {$index} upload error: {$_FILES['flist']['error'][$index]}";
continue;
}
// 验证 MIME 类型（防御性检查）
$mimeType = $_FILES['flist']['type'][$index];
if (!in_array($mimeType, ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'], true)) {
$errors[] = "File {$index} is not a supported image type: {$mimeType}";
continue;
}
// 生成唯一文件名
$uniqId = uniqid();
$ext = pathinfo($_FILES['flist']['name'][$index], PATHINFO_EXTENSION) ?: 'jpg';
$targetPath = $uploadsDir . $uniqId . '.' . strtolower($ext);
// 使用 GD 处理 JPEG（注意：PNG/GIF 需用对应函数）
if ($mimeType === 'image/jpeg' || $mimeType === 'image/jpg') {
$img = imagecreatefromjpeg($tmpName);
if ($img === false) {
$errors[] = "Failed to load JPEG {$index}";
continue;
}
if (!imagejpeg($img, $targetPath, 90)) {
$errors[] = "Failed to save JPEG {$index}";
imagedestroy($img);
continue;
}
imagedestroy($img);
} else {
// 兜底：直接移动（适用于 PNG/GIF 等无需处理场景）
if (!move_uploaded_file($tmpName, $targetPath)) {
$errors[] = "Failed to move file {$index}";
continue;
}
}
$successCount++;
}
echo json_encode([
'success' => $successCount,
'errors' => $errors,
'message' => "Uploaded {$successCount} images. " . (count($errors) ? 'Errors: ' . implode('; ', $errors) : 'All OK.')
]);✅ 总结与最佳实践
- ✅ 前端关键：用
for循环 +fd.append('field[]', file)；禁用contentType和processData； - ✅ 后端关键：遍历
$_FILES['field']['tmp_name']，用$index同步获取name、type、error； - ✅ 安全增强：校验
$_FILES['...']['error']、MIME 类型、文件扩展名，避免直接信任客户端输入； - ✅ 健壮性：创建目标目录、处理不同图像格式、返回结构化 JSON 响应便于前端反馈；
- ❌ 避免：
fd.append('field', fileList)（无效）、foreach($_FILES['field'])（逻辑错误）、忽略上传错误码。
通过以上修正，即可稳定实现文件夹级图片批量上传，并确保服务端正确接收与处理每一张图片。
