如何通过AJAX传递图片与字符串数据？上传多数据问题求助

看起来你当前的核心问题有两个：一是AJAX请求没把名称等文本数据和图片一起传给后端，二是PHP端接收不到上传的文件导致$_FILES["image"]未定义。我来一步步帮你解决：

问题根源 #

普通的AJAX请求如果用普通对象传参，没办法正确处理文件类型的数据；另外如果没配置好AJAX的请求头和数据处理方式，后端就接收不到上传的文件，自然会出现“image未定义”的错误。

解决方案：使用FormData对象传递混合数据 #

FormData是专门用来处理包含文件的表单数据的API，它能自动收集表单里的文本字段和文件，并且让AJAX以正确的格式发送给后端。

第一步：确保HTML表单结构正确 #

假设你的HTML表单大概是这样（如果不是，对应调整name属性即可）：

<form id="movieUploadForm">
  <input type="text" name="movieName" placeholder="请输入电影名称">
  <input type="file" name="image" accept="image/*">
  <!-- 其他需要传递的字段都可以像上面这样添加name属性 -->
  <button type="submit">上传电影信息</button>
</form>

第二步：编写正确的AJAX代码 #

这里提供原生JS和jQuery两种版本，你可以根据自己的项目选择：

原生JavaScript版本

// 监听表单提交事件
document.getElementById('movieUploadForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认的刷新提交行为

  // 创建FormData对象，直接传入表单元素，自动收集所有带name属性的字段（包括文件）
  const formData = new FormData(this);

  // 发送AJAX请求
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'uploadmovie.php', true);

  // 监听请求完成事件
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('上传成功，后端响应：', xhr.responseText);
      // 这里可以添加成功后的页面逻辑，比如提示用户、刷新列表等
    } else {
      console.error('上传失败，状态码：', xhr.status);
    }
  };

  // 发送FormData数据
  xhr.send(formData);
});

jQuery版本

如果你项目里用了jQuery，代码可以这样写：

$('#movieUploadForm').submit(function(e) {
  e.preventDefault();

  const formData = new FormData(this);

  $.ajax({
    url: 'uploadmovie.php',
    type: 'POST',
    data: formData,
    // 这两个配置是关键！必须设置，否则文件无法正确传输
    processData: false, // 不要让jQuery处理FormData数据
    contentType: false, // 不要手动设置Content-Type，让浏览器自动生成正确的请求头
    success: function(response) {
      console.log('上传成功：', response);
    },
    error: function(xhr) {
      console.error('上传失败：', xhr.responseText);
    }
  });
});

第三步：修正PHP后端代码 #

现在后端可以正确接收到文件和文本数据了，调整你的uploadmovie.php代码，先做合法性检查再处理：

<?php
// 首先检查是否有文件上传，且没有错误
if (isset($_FILES["image"]) && $_FILES["image"]["error"] === UPLOAD_ERR_OK) {
  // 获取上传文件的临时路径和文件名
  $imageTmpPath = $_FILES["image"]["tmp_name"];
  $imageOriginalName = $_FILES["image"]["name"];
  
  // 获取文本字段，比如电影名称
  $movieName = isset($_POST["movieName"]) ? trim($_POST["movieName"]) : '';
  // 其他字段也可以用$_POST["字段name"]获取

  // 这里添加文件保存逻辑（比如保存到服务器指定目录）
  $uploadDir = './movie_images/'; // 自定义你的上传目录
  // 如果目录不存在，创建目录
  if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0755, true);
  }
  // 生成目标文件路径（可以给文件名加前缀避免重复，比如时间戳）
  $targetFilePath = $uploadDir . time() . '_' . basename($imageOriginalName);

  // 移动临时文件到目标路径
  if (move_uploaded_file($imageTmpPath, $targetFilePath)) {
    // 这里可以把$movieName、$targetFilePath等数据存入数据库
    echo json_encode([
      'status' => 'success',
      'message' => '上传成功',
      'movieName' => $movieName,
      'imagePath' => $targetFilePath
    ]);
  } else {
    echo json_encode(['status' => 'error', 'message' => '文件保存失败']);
  }
} else {
  // 处理文件上传错误
  $errorMsg = '未收到上传文件';
  if (isset($_FILES["image"])) {
    switch ($_FILES["image"]["error"]) {
      case UPLOAD_ERR_INI_SIZE:
        $errorMsg = '文件大小超过php.ini限制';
        break;
      case UPLOAD_ERR_FORM_SIZE:
        $errorMsg = '文件大小超过表单限制';
        break;
      case UPLOAD_ERR_PARTIAL:
        $errorMsg = '文件仅部分上传';
        break;
      case UPLOAD_ERR_NO_FILE:
        $errorMsg = '请选择要上传的图片';
        break;
      default:
        $errorMsg = '未知上传错误';
    }
  }
  echo json_encode(['status' => 'error', 'message' => $errorMsg]);
}
?>

关键注意事项 #

• 所有需要传递的字段（包括文本和文件）都必须有name属性，FormData是根据name来识别字段的
• AJAX请求必须设置processData: false和contentType: false（jQuery版本），原生JS不需要额外设置，因为send(FormData)会自动处理请求头
• PHP端一定要先检查$_FILES["image"]是否存在且error为UPLOAD_ERR_OK，避免出现未定义的错误

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