本文旨在解决在使用ajax和FormData进行多文件上传时，服务器端$_FILES数组为空的问题。文章将分析可能导致此问题的原因，并提供两种有效的解决方案，包括利用表单提交以及使用$.each()方法构建FormData，帮助开发者顺利实现多文件上传功能。
在使用Ajax和FormData进行文件上传时，特别是涉及到多文件上传，开发者可能会遇到服务器端$_FILES数组为空的情况。这通常是由于前端FormData构建方式不正确，或者Ajax请求的配置不当造成的。以下提供两种解决方案，帮助你正确实现多文件上传。
解决方案一：利用表单提交
这种方法利用现有的html表单和jquery的submit事件，简化了FormData的构建过程。
-
HTML 结构：
首先，确保你的HTML包含一个表单，并且文件输入框在表单内部。
<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>
-
jQuery 代码：
使用jQuery监听表单的submit事件，阻止默认的提交行为，并使用Ajax发送请求。
$("#uploadForm").on('submit', function(e) { e.preventDefault(); // 阻止表单默认提交 $.ajax({ type: "POST", url: "/server/fnc/upload-images", data: new FormData(this), // 使用 FormData(this) 自动收集表单数据 contentType: false, // 不设置Content-type请求头，因为是由formdata设置为multipart/form-data processData: false, // 告诉jquery不要去处理发送的数据 success: function(res) { console.log(res); // 处理服务器响应 }, Error: function(err){ console.error(err); } }); });
解决方案二：使用 $.each() 构建 FormData
如果不想使用表单提交，或者需要更精细地控制FormData的构建过程，可以使用$.each()方法遍历文件，并逐个添加到FormData对象中。
var formData = new FormData(); $.each($("input[type='file']")[0].files, function(i, file) { formData.append('file', file); // 将每个文件添加到 FormData }); $.ajax({ type: "POST", url: "/server/fnc/upload-images", data: formData, contentType: false, processData: false, success: function(res){ console.log(res); }, error: function(err){ console.error(err); } });
- formData.append(‘file’, file)：这里，’file’是服务器端接收文件时使用的键名。 如果服务器端需要接收多个文件，并且区分它们，可以使用不同的键名，例如’file-‘ + i，或者将所有的文件都使用同一个键名，服务器端接收为一个数组。
注意事项和总结
- Content-Type 和 ProcessData： 在使用FormData时，务必将contentType设置为false，并将processData设置为false，否则会导致数据无法正确发送。
- 服务器端配置： 确保服务器端已经正确配置，能够接收和处理multipart/form-data格式的请求。
- 键名一致性： 前端FormData中使用的键名必须与服务器端接收文件时使用的键名一致。
- 错误处理： 添加error回调函数，以便在请求失败时能够及时发现问题。
通过以上两种方法，可以有效地解决Ajax FormData多文件上传时$_FILES为空的问题。选择哪种方法取决于你的具体需求和项目结构。通常，利用表单提交的方法更加简洁，而使用$.each()方法则更加灵活。