本文针对在使用Ajax和FormData进行多文件上传时，服务器端$_FILES数组为空的问题，提供了详细的解决方案。通过分析常见原因，结合示例代码，帮助开发者理解并解决该问题，确保多文件上传功能的正常运行。文章涵盖了使用原生FormData以及利用表单提交两种方式，并提供了相应的代码示例和注意事项。
在使用Ajax进行文件上传时，$_FILES为空是一个常见的问题，尤其是在尝试上传多个文件时。这通常是由于FormData对象的使用方式不正确，或者服务器端的配置问题导致的。下面将详细介绍可能的原因以及相应的解决方案。
问题分析
当使用FormData对象上传文件时，需要确保以下几点：
- contentType 设置为 false: contentType: false 告诉 jQuery 不要设置 Content-Type 请求头。让浏览器根据 FormData 的内容设置正确的 Content-Type，通常是 multipart/form-data。
- processData 设置为 false: processData: false 告诉 jQuery 不要将 data 参数转换为字符串。因为 FormData 已经包含了正确格式的数据。
- FormData 对象正确构建: 确保将所有文件都添加到 FormData 对象中，并且使用正确的键名。
解决方案
以下提供两种常用的解决方案：使用原生FormData逐个添加文件，以及利用表单提交。
方法一：使用原生FormData逐个添加文件
这种方法更灵活，允许你对每个文件进行单独处理。
// 获取文件 input 元素
var fileInput = document.getElementById('images-input-file');
var files = fileInput.files;
// 创建 FormData 对象
var formData = new FormData();
// 遍历文件列表，逐个添加到 FormData
for (var i = 0; i < files.length; i++) {
formData.append('file-' + i, files[i]); // 使用 file-0, file-1, ... 作为键名
}
// 发送 Ajax 请求
$.ajax({
url: '/server/fnc/upload-images',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(response) {
console.log(response);
},
error: function(error) {
console.error(error);
}
});服务器端 PHP 代码示例 (server/fnc/upload-images)
ECTouch是上海商创网络科技有限公司推出的一套基于 PHP 和 MySQL 数据库构建的开源且易于使用的移动商城网店系统！应用于各种服务器平台的高效、快速和易于管理的网店解决方案，采用稳定的MVC框架开发，完美对接ecshop系统与模板堂众多模板，为中小企业提供最佳的移动电商解决方案。ECTouch程序源代码完全无加密。安装时只需将已集成的文件夹放进指定位置，通过浏览器访问一键安装，无需对已有
$file) {
// 获取文件名
$filename = $file['name'];
// 获取临时文件名
$tmp_name = $file['tmp_name'];
// 获取文件大小
$filesize = $file['size'];
// 获取文件类型
$filetype = $file['type'];
// 文件保存路径
$destination = 'uploads/' . $filename;
// 移动文件到指定目录
if (move_uploaded_file($tmp_name, $destination)) {
echo "File " . $filename . " uploaded successfully.\n";
} else {
echo "File " . $filename . " upload failed.\n";
}
}
} else {
echo "No files uploaded.";
}
?>注意事项：
- 确保服务器端有 uploads 目录，并且 PHP 进程有写入权限。
- 可以根据实际需求修改文件保存路径和文件名。
- $key 在这里是 file-0, file-1 等，可以在服务器端根据这个键名来访问对应的文件。
方法二：利用表单提交
如果你的文件 input 包含在一个 form 表单中，可以直接使用表单提交的方式。
$("#uploadForm").on('submit', function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "/server/fnc/upload-images",
data: new FormData(this), // 使用 FormData(this)
contentType: false,
processData: false,
success: function(res){
console.log(res);
},
error: function(error) {
console.error(error);
}
});
});服务器端 PHP 代码示例 (server/fnc/upload-images)
注意事项：
- 确保 form 标签的 enctype 属性设置为 multipart/form-data。
- 服务器端通过 $_FILES['images'] 访问上传的文件，因为 input 的 name 属性是 images[]。
- 服务器端需要遍历 $_FILES['images']['name'] 数组来处理每个文件。
总结
解决 $_FILES 为空的问题，关键在于正确使用 FormData 对象，并确保 Ajax 请求的 contentType 和 processData 设置正确。 选择哪种方法取决于你的具体需求和项目结构。 如果需要对每个文件进行单独处理，建议使用原生 FormData 逐个添加文件的方式。 如果文件 input 包含在 form 表单中，并且不需要对每个文件进行特殊处理，可以直接使用表单提交的方式。 此外，务必检查服务器端的文件上传配置，例如文件大小限制和临时目录权限，以确保文件能够成功上传。
