在使用Ajax配合FormData实现多文件上传的功能时,不少开发者会遇到后端$_FILES数组为空的问题,明明前端已经选中了多个文件,后端却无法接收到任何文件数据,导致上传功能无法正常运作。

常见导致$_FILES为空的原因
前端构造FormData错误
很多开发者在构造FormData时,没有正确将多个文件添加到FormData中,或者添加的文件字段名和后端接收的字段名不匹配,都会导致后端无法获取到文件数据。
请求头设置错误
手动设置了Content-Type请求头,尤其是设置了multipart/form-data但是没有携带 boundary参数,会导致请求体的格式不符合规范,后端无法解析出文件内容。
后端接收逻辑错误
后端接收文件时使用的字段名和前端FormData中设置的文件字段名不一致,或者没有正确处理多文件上传的场景,也会导致$_FILES为空。
前端正确实现方式
前端需要先获取文件输入框的所有文件,然后遍历添加到FormData中,注意不要手动设置Content-Type请求头,让浏览器自动生成带boundary的请求头。
<!-- 前端HTML结构 -->
<input type="file" id="fileInput" multiple>
<button id="uploadBtn">上传文件</button>
<script>
document.getElementById('uploadBtn').addEventListener('click', function() {
const fileInput = document.getElementById('fileInput');
const files = fileInput.files;
if (files.length === 0) {
alert('请先选择文件');
return;
}
const formData = new FormData();
// 遍历所有选中的文件,添加到FormData,字段名统一为files[]
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
// 发起Ajax请求
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload.php', true);
// 不要手动设置Content-Type,浏览器会自动处理
xhr.onload = function() {
if (xhr.status === 200) {
console.log('上传结果:', xhr.responseText);
}
};
xhr.send(formData);
});
</script>
后端正确接收方式
PHP后端需要接收名为files的数组格式的文件字段,多文件上传时前端传递的是files[],后端对应的$_FILES['files']就是包含所有文件信息的数组。
<?php
// 检查是否有文件上传
if (isset($_FILES['files'])) {
$fileList = $_FILES['files'];
$uploadDir = './uploads/';
// 创建上传目录,如果不存在则创建
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0777, true);
}
// 遍历所有上传的文件
for ($i = 0; $i < count($fileList['name']); $i++) {
$fileName = $fileList['name'][$i];
$fileTmp = $fileList['tmp_name'][$i];
$fileError = $fileList['error'][$i];
if ($fileError === 0) {
$targetPath = $uploadDir . $fileName;
move_uploaded_file($fileTmp, $targetPath);
echo "文件{$fileName}上传成功n";
} else {
echo "文件{$fileName}上传失败,错误码:{$fileError}n";
}
}
} else {
echo '未接收到文件';
}
?>
调试建议
如果还是出现$_FILES为空的情况,可以先通过浏览器的开发者工具查看网络请求的请求体,确认FormData是否正确携带了文件数据,也可以打印$_POST和$_FILES的内容,排查字段名是否匹配的问题。
注意:如果使用jQuery的$.ajax方法上传,需要设置processData为false,contentType为false,避免jQuery对FormData进行处理导致格式错误。
// jQuery实现方式示例
$('#uploadBtn').click(function() {
const formData = new FormData();
const files = $('#fileInput')[0].files;
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
$.ajax({
url: '/upload.php',
type: 'POST',
data: formData,
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
success: function(res) {
console.log(res);
}
});
});