本文针对在使用Ajax FormData上传多个文件时，服务器端$_FILES数组为空的问题，提供了详细的解决方案。文章首先概述了问题的现象，即单文件上传正常，多文件上传失败。然后，通过分析常见错误，给出了两种可行的修复方案，包括使用表单提交事件和改进FormData的构建方式。最终，帮助开发者成功实现多文件上传功能。
在使用Ajax FormData进行文件上传时，开发者可能会遇到一个常见的问题：当上传单个文件时，服务器端的$_FILES数组能够正确接收文件信息，但当尝试上传多个文件时，$_FILES却为空。 这通常是由于FormData的构建方式不正确导致的。 下面将提供两种解决方案来解决这个问题。
方案一：使用表单提交事件
一种更简洁的方式是利用表单的submit事件，直接将整个表单数据传递给Ajax。 这种方法避免了手动构建FormData的复杂性，并且通常更可靠。
HTML:
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="images[]" id="images-input-file" accept="image/jpeg" multiple="multiple" hidden />
<button type="submit">上传</button>
</form>JavaScript:
$("#uploadForm").on('submit',(function(e) {
e.preventDefault(); // 阻止默认的表单提交行为
$.ajax({
type: "POST",
url: "/server/fnc/upload-images",
data: new FormData(this), // 将整个表单数据传递给FormData
contentType: false, // 必须设置为false，否则会告诉服务器是application/x-www-form-urlencoded类型
processData: false, // 必须设置为false，否则jquery会尝试处理data
success: function(res){
console.log(res);
},
error: function(err){
console.error(err);
}
});
}));解释：
多瑞外贸网店系统立足于全球化贸易往来的一款外贸类企业用户高端应用电子商务系统软件，帮助企业快速搭建网聚全球商机的电子商务系统。本系统使用纯正的英文，国外用户更容易阅读；多年专业外贸设计经验，熟练掌握美式英语，更符合国外用户考虑和解决问题的逻辑；设计风格、用户体验符合国外用户的习惯；简洁明了的设计风格正是欧美用户的所爱，时时推出新模板、紧跟时尚潮流，供您选择。新增加淘宝数据自动导入，批量上传商品，商
- e.preventDefault(); 阻止了表单的默认提交行为，防止页面跳转。
- new FormData(this) 将整个表单（this指向表单元素）的数据封装到FormData对象中。
- contentType: false 和 processData: false 是关键设置，确保jQuery不会修改FormData的内容，而是直接将其发送到服务器。
- 添加了error回调函数，方便调试错误。
方案二：改进FormData的构建方式
如果需要更细粒度的控制，或者不想使用表单提交事件，可以手动构建FormData，但需要确保以正确的方式添加文件。
HTML:
<input type="file" name="images[]" id="images-input-file" accept="image/jpeg" multiple="multiple" hidden />
JavaScript:
var formData = new FormData();
var files = $("input[type='file']")[0].files; // 获取文件列表
for (var i = 0; i < files.length; i++) {
formData.append('images[]', files[i]); // 使用 'images[]' 作为键，以便服务器端能正确接收数组
}
$.ajax({
method: "POST",
url: "/server/fnc/upload-images",
data: formData,
cache: false,
processData: false,
contentType: false,
success: function(res) {
console.log(res);
},
error: function(err){
console.error(err);
}
});解释：
- 关键在于formData.append('images[]', files[i]);。 images[] 确保服务器端能将上传的文件视为一个数组。 之前的例子中使用了 file-" + i 这种方式，虽然可以上传多个文件，但是服务器端接收到的不是一个文件数组，而是多个独立的文件，因此需要修改键名。
- 添加了error回调函数，方便调试错误。
注意事项和总结
- 服务器端配置： 确保服务器端（例如PHP的php.ini）允许上传的文件大小和数量足够。 upload_max_filesize 和 max_file_uploads 是两个重要的配置项。
- MIME类型： contentType: false 告诉jQuery不要设置Content-Type，浏览器会自动根据FormData的内容设置正确的Content-Type（通常是multipart/form-data）。
- 错误处理： 在Ajax请求中添加error回调函数，可以帮助你快速定位问题。
- 键名一致性： 确保前端FormData中使用的键名与后端服务器接收文件的键名一致（例如，这里的 images[]）。
总结来说，解决Ajax FormData上传多文件时$_FILES为空的问题，关键在于正确构建FormData对象，并确保Ajax请求的contentType和processData设置为false。 选择使用表单提交事件或手动构建FormData取决于你的具体需求和偏好。 两种方法都能够有效地解决这个问题，并实现多文件上传功能。 调试时，请务必检查服务器端配置和键名一致性，以便快速定位问题。
