本文针对在使用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)
<?php // 检查是否有文件上传 if (!empty($_FILES)) { // 遍历上传的文件 foreach ($_FILES as $key => $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 表单中，可以直接使用表单提交的方式。
<form id="uploadForm" action="/server/fnc/upload-images" method="POST" enctype="multipart/form-data"> <input type="file" name="images[]" id="images-input-file" accept="image/jpeg" multiple="multiple" hidden /> <button type="submit">上传</button> </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)
<?php // 检查是否有文件上传 if (isset($_FILES['images'])) { $files = $_FILES['images']; $file_count = count($files['name']); for ($i = 0; $i < $file_count; $i++) { $filename = $files['name'][$i]; $tmp_name = $files['tmp_name'][$i]; $filesize = $files['size'][$i]; $filetype = $files['type'][$i]; $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."; } ?>
注意事项：
- 确保 form 标签的 enctype 属性设置为 multipart/form-data。
- 服务器端通过 $_FILES[‘images’] 访问上传的文件，因为 input 的 name 属性是 images[]。
- 服务器端需要遍历 $_FILES[‘images’][‘name’] 数组来处理每个文件。
总结
解决 $_FILES 为空的问题，关键在于正确使用 FormData 对象，并确保 Ajax 请求的 contentType 和 processData 设置正确。 选择哪种方法取决于你的具体需求和项目结构。 如果需要对每个文件进行单独处理，建议使用原生 FormData 逐个添加文件的方式。 如果文件 input 包含在 form 表单中，并且不需要对每个文件进行特殊处理，可以直接使用表单提交的方式。 此外，务必检查服务器端的文件上传配置，例如文件大小限制和临时目录权限，以确保文件能够成功上传。
以上就是多文件上传时$_FILES为空的解决方案与实践的详细内容，更多请关注php中文网其它相关文章！