使用JS、Ajax和PHP开发注册系统时的图片上传问题求助

你的核心问题是错误地用GET请求传递文件，并且直接把FormData对象拼接到URL参数中——GET请求无法传输二进制文件，FormData直接转字符串只会得到[object FormData]，服务器自然拿不到文件数据。以下是完整的修正方案：

一、前端代码修改 #

1. 调整请求方式与数据传递逻辑 #

把JSON数据也加入FormData，改用POST请求发送，不要用URL参数拼接：

var files = document.getElementById("user_picture").files;
var formData = new FormData();

// 把注册JSON数据加入FormData
formData.append('otsl_data', JSON.stringify(regDataObj));
// 加入action标识
formData.append('otsl_action', 'player_reg');

// 循环添加文件（支持多文件）
for (var i = 0; i < files.length; i++) {
  formData.append('upfile[]', files[i]); // 用数组格式方便后端接收多文件
}

pbc_env = window.location.protocol + "//" + document.location.hostname;
var url = pbc_env + "/otsl_api.php";

// 用jQuery的ajax发送POST请求，注意设置正确的参数
$.ajax({
  url: url,
  type: 'POST',
  data: formData,
  processData: false, // 禁止jQuery处理FormData，否则会破坏文件数据
  contentType: false, // 让浏览器自动设置正确的Content-Type（multipart/form-data）
  dataType: 'json',
  success: function(result) {
    console.log("Got result: " + result.success + " Message: " + result.message);
    result_obj = result;
  },
  error: function(xhr) {
    console.error("请求失败:", xhr.responseText);
  }
});

关键修改点： #

• 改用POST请求，这是文件上传的标准方式
• 把所有数据（JSON、action、文件）都放入FormData，不要拆分到URL参数
• 设置processData: false和contentType: false，确保jQuery不会篡改FormData的结构

二、后端PHP代码修改 #

1. 接收数据的调整 #

文件上传的内容不会出现在$_GET或$_REQUEST里，而是在$_FILES超全局变量中。修改接收逻辑：

// 接收JSON数据（POST方式）
$otsl_data = isset($_POST['otsl_data']) ? $_POST['otsl_data'] : '';
// 接收action标识
$otsl_action = isset($_POST['otsl_action']) ? $_POST['otsl_action'] : '';

// 接收上传的文件，对应前端的upfile[]
$player_images = $_FILES['upfile'];

2. 处理函数的修改 #

在setRegistration函数中，需要从$_FILES获取文件，而不是从参数里拿字符串：

protected function setRegistration() {
    $p_registration_data = $_POST['otsl_data'];
    $p_registrationObj = json_decode($p_registration_data, false);
    
    // 处理上传的文件
    $uploaded_files = $_FILES['upfile'];
    // 单文件的情况（如果是多文件需要循环处理）
    if ($uploaded_files['error'] === UPLOAD_ERR_OK) {
        $tmp_path = $uploaded_files['tmp_name'];
        $file_name = $uploaded_files['name'];
        $file_size = $uploaded_files['size'];
        $file_type = $uploaded_files['type'];
        
        // 示例：移动文件到服务器指定目录
        $target_dir = 'uploads/';
        // 确保目录存在
        if (!is_dir($target_dir)) {
            mkdir($target_dir, 0755, true);
        }
        $target_path = $target_dir . basename($file_name);
        if (move_uploaded_file($tmp_path, $target_path)) {
            echo json_encode(['success' => true, 'message' => '文件上传成功']);
        } else {
            echo json_encode(['success' => false, 'message' => '文件移动失败']);
        }
    } else {
        echo json_encode(['success' => false, 'message' => '文件上传错误，错误码：' . $uploaded_files['error']]);
    }
}

关键修改点： #

• 通过$_FILES['upfile']获取上传的文件信息
• 检查error字段判断上传是否成功（UPLOAD_ERR_OK表示无错误）
• 使用move_uploaded_file将临时文件移动到服务器的永久存储目录

三、额外注意事项 #

• 确保服务器的uploads目录有写入权限（设置为755或777，根据服务器配置调整）
• 可以添加文件类型、大小的验证，避免恶意文件上传
• 如果是多文件上传，需要循环遍历$_FILES['upfile']['tmp_name']等字段（因为多文件时$_FILES的结构是数组形式）

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