使用Ajax与PHP上传文件时无法传递文件，求排查方案

这问题我做项目时也踩过一模一样的坑，核心是你没正确处理文件上传的Ajax请求逻辑，还有表单缺少关键配置，咱们一步步来解决：

核心原因 #

• 表单缺少文件上传必需的编码属性：文件上传的表单必须设置enctype="multipart/form-data"，否则浏览器不会以正确格式编码文件数据，后端自然接收不到文件信息。
• form.serialize()无法处理文件数据：这个方法只能序列化文本类表单字段（比如input text、select），对于文件这种二进制数据完全无能为力，得用FormData对象来包装整个表单数据。

修改步骤 #

1. 给表单添加enctype属性 #

修改表单代码，补上文件上传必需的编码属性：

<form id="form32_c" method="post" enctype="multipart/form-data">
  <br><br>
  <div class=titles_c>Title:</div>
  <input type="text" class="form_inputs" name="ftitle" placeholder="name" maxlength="50"><br><br>
  <div class=titles_c>Cover Image:</div>
  <input type="file" name="fileToUpload" class="form_inputs" id="fileToUpload"><br><br>
  <input type="submit" id="submit_c" class="button2" value="CREATE">
</form>

2. 重构Ajax请求代码 #

把form.serialize()换成FormData，同时设置两个关键的Ajax参数：

$('#submit_c').click(function (e) {
  var form = $('#form32_c');
  e.preventDefault();
  
  // 用FormData包装整个表单，自动包含文本和文件数据
  var formData = new FormData(form[0]);
  
  $.ajax({
    url: '/js-calls/post.php',
    type: 'POST',
    cache: false,
    // 必须设置这两个参数：禁止jQuery自动处理数据和请求头
    contentType: false,
    processData: false,
    data: formData,
    success: function(data){
      $('#back').hide();
    }
  });
});

3. 优化PHP端的检查逻辑 #

建议把PHP的判断逻辑优化一下，通过error状态码更准确判断上传状态，而不是只检查tmp_name：

if (isset($_FILES['fileToUpload']) && $_FILES['fileToUpload']['error'] === UPLOAD_ERR_OK) {
    // 文件上传成功，这里写你的处理逻辑（比如移动临时文件到指定目录）
    $uploadPath = '/path/to/your/upload/folder/' . $_FILES['fileToUpload']['name'];
    move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadPath);
} else {
    // 上传失败，可以根据error值排查问题
    // 比如UPLOAD_ERR_NO_FILE表示未选择文件，UPLOAD_ERR_INI_SIZE表示文件超过php.ini限制等
    echo "上传失败，错误码：" . $_FILES['fileToUpload']['error'];
}

为什么要这么改？ #

• FormData是HTML5提供的对象，能正确收集表单中的所有数据，包括文件的二进制内容。
• contentType: false是告诉jQuery不要自动设置请求头，让浏览器自动生成包含multipart/form-data的正确请求头。
• processData: false是禁止jQuery把FormData转换成字符串，保持其原始二进制格式，这样后端PHP才能正确解析到$_FILES数组中。

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