Ajouter photo de profil ajax et php

Bonjour à tous, j'ai un problème sur mon code ajax ou php pour ajout de photo de profil. L'ajout se fais correctement on très bien la photo et aussi dans la base de données, mais lorsque j'actualise ma page elle disparait et aussi lorsque j'ajoute une photo de plus d e 2Mo j'ai pas de message d'alert, elle s'affiche dans le <img src="";> ce qui est bizzare. Est-ce que quelqu'un peut il me corriger mes erreurs s'il vous plait, merci beaucoup de l'aide.

Code html:

        `<div class="blurring dimmable image user-profile-photo">
                            <div class="ui dimmer">
                                <div class="content">
                                    <div class="center">
                                        <!--<div class="ui inverted button">Add Friend</div>-->
                                        <!--- PHOTO DE PROFILE -->
                                        <div class="alert alert-success" style="display:none;"></div>
                                        <input type="file" id="file-profile-photo" style="display:none">
                                        <a href="#" id="edit-profile-photo" name="add-avatar" class="photo-overlay">
                                            <i class="camera retro icon" style="font-size:70px;"></i>
                                        </a>

                                        <div id="edit-profile-photo-loader" class="photo-overlay" style="display: none;">
                                            <div class="ui active dimmer">
                                                <div class="ui text loader">Loading...</div>
                                            </div>
                                        </div>

                                        <!---- PHOTO DE PROFILE --->
                                    </div>
                                </div>
                            </div>
                            <img src="" id="avatar" height="150px;" alt="<?php echo $user['pseudo']; ?>">
                        </div>`

code ajax:

        `    $('#file-profile-photo').change(function(e) {  // sur le input
    var formData = new FormData();
    var file = $(this)[0].files[0];
    formData.append("file", file);
    formData.append("type", "avatar");

    var submitBtn = $("#edit-profile-photo");
    var loader = $("#edit-profile-photo-loader");
    alphaProfilNoDone = true;

    submitBtn.hide(); // display none if pic in;
    loader.show();

    $.ajax({
        url: './users/avatar.php',
        type: 'post',
        data: formData,
        contentType: false,
        processData: false,
        success: function(data) {
            if (data.success) {
                $("img#avatar").attr("src", "").attr("src", data.data.location)
                alert('sucess');
            }else{
                alert("Une erreur");
                loader.hide();
                alphaProfilNoDone = false;
            } 
        }
    });
});`

code php:

        if(isset($_SESSION['id'])){
if(isset($_FILES['file']) AND !empty($_FILES['file']['name'])){
    $taille = 2097152;
    $extensionsValides = array('jpg', 'jpeg', 'png');
    if($_FILES['file']['size'] <= $taille){
        $extensionUpload = strtolower(substr(strrchr($_FILES['file']['name'], '.'), 1));
        if(in_array($extensionUpload, $extensionsValides)){
            $chemin = "../../../../xampp/DEv/users_account/alphamembre/avatar/".$_SESSION['id'].".".$extensionUpload;
            $resultat = move_uploaded_file($_FILES['file']['tmp_name'], $chemin);
            if($resultat){
                $sql_update = 'UPDATE users SET avatar = :avatar WHERE id = :id';
                $req_update = $pdo->prepare($sql_update);
                $req_update->execute(
                    [
                        'avatar' => $_SESSION['id'].".".$extensionUpload,
                        'id' => $_SESSION['id']
                    ]
                );
                echo $chemin;
            }else{
                alert ("Erreur durant l'importation de votre photo de profil");
            }   // english: Error importing your profile photo;

        }else{
            alert ("Votre photo de profil doit être au format jpg, jpeg ou png");
        }       // english: Your profile picture must be in jpg, jpeg or png format;

    }else{
        alert ("Votre photo de profil ne doit pas dépasser 2Mo");
    }   // english:Your profile photo must not exceed 2MB;
}

}

Bonsoir @alpha976 !

Pour ton problème d'image qui n'apparaît pas au chargement de la page, c'est tout à fait normal : ta balise <img> a pour attribut src="". Autrement dit, tu ne donnes aucune source d'image à récupérer. Pour éviter cela, il faudrait afficher la source de l'image déjà existante dans ta base de données ! Puisque ton utilisateur est contenu dans la variable $usersur cette page, tu devrais pouvoir écrire quelque chose comme :

<img src="<?php echo $user['avatar'] ?>" id="avatar" height="150px;" alt="<?php echo $user['pseudo']; ?>">

Il sera peut-être nécessaire d'ajouter un chemin "initial" selon le dossier où tu sauvegarde les avatars de tes membres. Par exemple :

<img src="/users_account/alphamembre/avatar/<?php echo $user['avatar'] ?>" id="avatar" height="150px;" alt="<?php echo $user['pseudo']; ?>">

Ensuite, le fait qu'aucune erreur ne s'affiche lorsque tu tentes d'uploader une image de plus de 2Mo peut venir de ta configuration d'Apache (qui est dans ton cas géré par Xampp) : il est possible qu'Apache limite les fichiers à 2Mo max. Avant de vérifier la condition !empty($_FILES['file']['name']), je t'invite à rajouter une condition pour voir si une erreur a été détectée sur le fichier grâce à $_FILES['file']['error']. Voici à quoi pourrait ressembler (en partie) ton code :

if (isset($_SESSION['id']) AND isset($_FILES['file'])) {
    if (!$_FILES['file']['error']) {
        // ...
    } else {
        echo "Code d'erreur " . $_FILES['file']['error'];
    }
}

Tu peux retrouver plus de détails sur les codes d'erreurs de fichiers sur le manuel de PHP.net.

Enfin, il faut faire attention à ne pas confondre PHP et JS. PHP est un langage côté serveur alors que JS est côté client. Entre autre, tu as ici des alert() (JS) dans ton code PHP, ce qui est impossible. Il faudra forcément que ton script PHP renvoie du contenu au script JS qui l'appelle (au format JSON par exemple) pour que ce soit ensuite JS qui fasse un alert() côté client.

En espérant avoir pu t'aider 😉

A bientôt,

PrimFX