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

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

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

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

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

1. HTML 结构：

   首先，确保你的HTML包含一个表单，并且文件输入框在表单内部。

   
       
       上传
   

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

2. jQuery 代码：

   

   多瑞(doreesoft)外贸网店系统

   多瑞外贸网店系统立足于全球化贸易往来的一款外贸类企业用户高端应用电子商务系统软件，帮助企业快速搭建网聚全球商机的电子商务系统。本系统使用纯正的英文，国外用户更容易阅读；多年专业外贸设计经验，熟练掌握美式英语，更符合国外用户考虑和解决问题的逻辑；设计风格、用户体验符合国外用户的习惯；简洁明了的设计风格正是欧美用户的所爱，时时推出新模板、紧跟时尚潮流，供您选择。新增加淘宝数据自动导入，批量上传商品，商

   下载

   使用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()方法则更加灵活。