Ajax上传含文件与POST数据失败：参数无法正确传递求助

你当前的问题在于：发送包含文件的Ajax请求时，错误地将FormData对象与普通参数放在同一个对象中传递，导致后端无法正确接收numphoto和idarticle这两个参数。

修正后的前端代码 #

$('#image--1').change(function (e) { 
    e.preventDefault();
    var img = new FormData();
    img.append('media', $('#image--1')[0].files[0]);
    var idarticle = $('#article').val();
    uploadphoto(img, 1, idarticle);
});

function uploadphoto(media, numphoto, idarticle) {
    console.log('num : ' + numphoto);
    console.log('idarticle : ' + idarticle);
    
    // 将普通参数追加到FormData实例中
    media.append('numphoto', numphoto);
    media.append('idarticle', idarticle);
    
    $.ajax({
        type: "POST",
        url: "ajax/change-photo.php",
        processData: false,
        contentType: false,
        data: media, // 直接传入FormData实例
        dataType: "JSON" 
    }).done(function (ret) {
        console.log(ret);
    }).fail(function (xhr) {
        console.log(xhr.responseText);
    });
}

后端PHP代码修正示例 #

<?php
// ajax/change-photo.php
// 安全获取POST参数，避免未定义索引警告
$idarticle = $_POST['idarticle'] ?? null;
$numphoto = $_POST['numphoto'] ?? null;
$media = $_FILES['media'] ?? null;

// 校验参数完整性
if (!$idarticle || !$numphoto || !$media) {
    echo json_encode(['error' => '必要参数缺失']);
    exit;
}

// 后续处理文件上传逻辑示例
// $uploadPath = '指定的上传目录/' . basename($media['name']);
// if (move_uploaded_file($media['tmp_name'], $uploadPath)) {
//     echo json_encode(['success' => true, 'file_path' => $uploadPath]);
// } else {
//     echo json_encode(['error' => '文件上传失败']);
// }
?>

关键说明 #

• 发送带文件的请求时，所有参数（包括普通字段和文件）必须都追加到同一个FormData实例中，不能将FormData与普通参数放在对象里嵌套传递，否则jQuery无法正确序列化数据。
• processData: false和contentType: false必须保留，这两个配置会阻止jQuery自动处理数据格式，让浏览器生成正确的multipart/form-data请求头，确保文件和参数能被后端正确解析。

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