解决Ajax FormData多文件上传时$_FILES为空的问题

本文旨在解决在使用Ajax和FormData进行多文件上传时，服务器端$_FILES数组为空的问题。文章将分析可能导致此问题的原因，并提供两种有效的解决方案，包括利用表单提交以及使用$.each()方法构建FormData，帮助开发者顺利实现多文件上传功能。

在使用Ajax和FormData进行文件上传时，特别是涉及到多文件上传，开发者可能会遇到服务器端$_FILES数组为空的情况。这通常是由于前端FormData构建方式不正确，或者Ajax请求的配置不当造成的。以下提供两种解决方案，帮助你正确实现多文件上传。

解决方案一：利用表单提交

这种方法利用现有的HTML表单和jQuery的submit事件，简化了FormData的构建过程。

1. 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>

   • enctype="multipart/form-data"：这个属性是必须的，它告诉浏览器以multipart/form-data格式编码表单数据，这是上传文件所必需的。
   • name="images[]"：文件输入框的name属性设置为images[]，允许服务器端接收多个同名的文件。

2. jQuery 代码：

   

   Deep Search

   智能文献、网页检索与分析工具。AI赋能，洞悉万象，让知识检索与总结触手可及

   下载

   使用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);
           }
       });
   });

   • new FormData(this)：这是关键，它会自动将表单中的所有数据（包括文件）添加到FormData对象中。
   • contentType: false：设置为false，让浏览器自动设置Content-Type头，通常为multipart/form-data。
   • processData: false：设置为false，告诉jQuery不要处理发送的数据，因为FormData对象已经包含了所有需要的信息。

解决方案二：使用 $.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()方法则更加灵活。