使用Jquery上传图片至服务器失败求助：返回空数组无文件上传

问题根源 #

1. AJAX数据传递格式错误
   你将FormData对象包裹在普通JS对象中传递（{fd:fd, handle:handle, reference:reference}），这种方式会导致FormData无法被后端正确解析，最终POST数据和文件都无法被接收。

2. 后端执行逻辑未触发
   因为前端未正确传递handle参数，后端的isset($_POST["handle"])判断不成立，后续文件处理代码完全不会执行。

修正后的代码 #

index.php 中的上传函数

function upload_image() {
    var handle      = document.getElementById("txt_handle").value;
    var reference   = document.getElementById("txt_reference").value;
    
    var fd          = new FormData();
    var files       = $('#txt_image_user')[0].files[0];
    
    // 把所有参数追加到FormData对象中
    fd.append('txt_image_user', files);
    fd.append('handle', handle);
    fd.append('reference', reference);

    $.ajax({
        type: 'POST',
        url: '_upload-image.php',
        cache: false,
        data: fd, // 直接传递FormData对象
        contentType: false,
        processData: false,
        error: function (e) {
            console.log('Ajax Error', e);
            alert('Erreur Ajax');
        },
        success: function(response){
            console.log(response);
        },
    });
}

_upload-image.php 后端处理代码

<?php 
require($_SERVER['DOCUMENT_ROOT']."/ew-includes/config.php");

// 调试用：打印接收的POST数据和文件信息
var_dump($_POST);
var_dump($_FILES);

$PathImage = $_SERVER['DOCUMENT_ROOT']."/ew-content/images/images-clients/";
// 递归创建目录并设置权限，避免父目录不存在的问题
if (!is_dir($PathImage)) {
    mkdir($PathImage, 0755, true);
}

// 同时检查必要参数和上传文件是否存在
if(isset($_POST["handle"]) && isset($_FILES["txt_image_user"])) {
    $handle = is_array($_POST["handle"]) ? implode(", ", $_POST['handle']) : $_POST['handle'];
    $reference = is_array($_POST["reference"]) ? implode(", ", $_POST['reference']) : $_POST['reference'];

    $img_name = $_FILES["txt_image_user"]["name"];
    $img_tmp  = $_FILES["txt_image_user"]["tmp_name"];
    $img_error = $_FILES["txt_image_user"]["error"];

    // 先校验文件上传是否成功
    if($img_error === UPLOAD_ERR_OK) {
        $filename   = "ew".$reference."_".$handle."_".date("YmdHi");
        $ext        = pathinfo($img_name, PATHINFO_EXTENSION);
        $photo      = $filename.".".$ext;
        $resultat   = move_uploaded_file($img_tmp, $PathImage.$photo);

        echo "img_name: ".$img_name."\n";
        echo "img_tmp: ".$img_tmp."\n";
        echo "ext: ".$ext."\n";
        echo "photo: ".$photo."\n";
        echo "resultat: ".($resultat ? "上传成功" : "上传失败")."\n";
    } else {
        echo "文件上传错误，错误码：".$img_error."\n";
    }
} else {
    echo "缺少必要参数或未接收到上传文件\n";
}
?>

额外注意事项 #

• 确保服务器上的ew-content/images/images-clients/目录有写入权限（通常设置为755）
• 前端可增加文件选择校验，避免用户未选文件就触发上传
• 建议后端增加文件类型、大小的验证逻辑，防止恶意文件上传

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