通过jQuery Ajax提交表单后$_POST与$_FILES为空的问题排查

通过jQuery Ajax提交包含文件的表单，客户端提示请求成功，但服务端打印$_POST或$_FILES结果为空，调用$_POST['bike_name']时出现“Undefined index: bike_name”错误。

相关代码 #

HTML代码 #

<form role="form" enctype='multipart/form-data' id="add_bike_form" method="post" action="add_bike.php">
    <div class="form-group">
        <label for="bike_name">Bike name </label>
        <input type="text" placeholder="Enter the bike name" id="bike_name" name="bike_name" class="form-control">
    </div>
    <div class="form-group">
        <label for="bike_model">Bike model</label>
        <input type="text" placeholder="Enter the Bike model" id="bike_model" name="bike_model" class="form-control">
    </div>
    <div class="form-group">
        <label for="matricule">Car number</label>
        <input type="number" placeholder="Enter the Car number" id="matricule"  name="matricule" class="form-control">
    </div>
    <div class="form-group">
        <label for="price">Price</label>
        <input type="number" placeholder="Enter the Price" id="price" name="price" class="form-control">
    </div>
    <div class="form-group">
        <label for="ig_link">The bike image</label>
        <input type="file" id="InputFile" name="image_bike">
        <p class="help-block">add the bike image here.</p>
    </div>
    <button class="btn btn-info" type="submit">Submit</button>
</form>

JavaScript代码 #

$("#add_bike_form").submit(function(e) {
    e.stopImmediatePropagation();
    e.preventDefault(); 
    var fd = new FormData( this );
    for (var [key, value] of fd.entries()) { 
        console.log(key, value); // 打印FormData内容，数据显示正常
    }
    
    $.ajax({
            url: "add_bike.php",
            type: "post",
            data: fd,
            cache: false,
            contentType: false,
            processData: false,
            error   : function () {
                console.log('try again');
            },
            success : function (data) {
                console.log('Thank God it worked!');
            }
        });
    });

PHP代码 #

print_r($_POST);
print_r($_FILES);
var_dump($_POST);
var_dump($_FILES);
echo $_POST['bike_name']; // 报错：Undefined index: bike_name

排查与解决办法 #

• 升级jQuery版本：旧版本jQuery（如1.x）对FormData的支持存在缺陷，建议升级到2.x及以上版本，确保表单数据能被正确封装和传递。
• 检查PHP配置限制：
  • 查看php.ini中的post_max_size和upload_max_filesize，确保值足够容纳提交的文件和表单数据。若文件超过限制，$_FILES会为空，$_POST数据也可能丢失。
  • 确认max_input_time设置合理，避免请求超时导致数据未完整接收。
• 调试请求传输情况：
  打开浏览器开发者工具的Network标签，查看Ajax请求的Form Data部分，确认数据是否真的发送到服务端。同时修改JS的success回调，打印服务端返回的内容：

  success : function (data) {
      console.log('服务端返回：', data);
  }
  

  直接查看服务端输出的$_POST和$_FILES结果，判断问题出在客户端还是服务端。
• 验证FormData构造：手动添加测试数据到FormData：

  fd.append('test_key', 'test_value');
  

  然后在服务端打印$_POST['test_key']，若仍为空，说明请求传输环节存在问题。
• 排查表单拦截代码：确认没有其他JS代码修改表单属性、拦截提交事件，导致数据未正确发送。

内容的提问来源于stack exchange，提问作者user9749028