Salut les amis Devs.

parceque je suis debutant en ajax peut etre, mais je n'arrive pas a obtenir le resulta voulu.

Ce que je veux faire: Je developpe une petite app qui me permet d'uploader et classer les musiques que j'aime le plus.

J'ai un formulaire qui me permet choisir le fichier audio et qui fait appel a une page add.php qui se charge de l'upload et qui ensuite retourne vers la page qui liste les differentes musiques. Du coup, il n'est pas possible de lire une musique et d'uploader en meme temps. pas vraiment cool.

Je recours a ajax pour resoudre le probleme, mais je n'arrive pas a obtenir le resultat.

Voici mon code:
Js

    form.onsubmit = function(e){
        //JE RECUPERE LA VALEUR DES DIFFERENTS CHAMPS
        var title = document.getElementById("title").value,
            author = document.getElementById("author").value,
            description = document.getElementById("description");
            //INITIALISER UN NOUVEAU OBJET XHR
            var xhr = new XMLHttpRequest();
            //APPEL DE LA PAGE EN ENVOYANT LES DONNEES EN POST
            xhr.open("POST", "addMusic.php", true);
            //RECUPERE LES REPONSES
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                }
            }
            //ENVOIE DE LA REQUETE
            xhr.setRequestHeader("Content-Type", "application/x-www-formurlencoded");
            xhr.send('title=' + title + '&author=' + author + '&description=' + description);

    }

Cote serveur | PHP:

<?php
$error = '';

if( isset($_FILES['music_file']) && $_FILES['music_file']['error'] == 0){
    $music_extension = strtolower( substr(strrchr($_FILES['music_file']['name'], '.'), 1) );

    if( $music_extension == "mp3"){

        if($_POST['title']){

            $music_name = sha1($_FILES['music_file']['tmp_name']).uniqid();
            //var_dump($music_name); die();

            $database = new PDO("mysql:host=localhost;dbname=favoritemusics", 'root', '');
            $database->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $database->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_OBJ);

            $insert = $database->prepare("INSERT INTO audios SET title=?, author=?, description=?, date_upload=NOW(), music_name=?, extension=?");
            $insert->execute(array($_POST['title'], $_POST['author'], $_POST['description'], $music_name, $music_extension));

            move_uploaded_file($_FILES['music_file']['tmp_name'], "medias/{$music_name}.{$music_extension}");
            header('Location:' . $_SERVER['HTTP_REFERER']);

        }else{
            //http_response_code(403);
            $error =  'Vous devez preciser le titre de la musique';
        }
    }else{
        //http_response_code(403);
        $error =  'Bad format';
    }
}
else{
    //http_response_code(403);
    $error =  'You have to choose a music';
}
?>

3 réponses


Pour faire des uploads de fichier en Ajax, tu dois utiliser l'API FormData. Le point négatif dans tout ça, c'est que ça n'offre pas le support de IE9. Si jamais tu veux simuler cette action aynschrone sans utiliser FormData, tu devras utiliser un iframe. Ainsi tu pourras contrôler la soumission du formulaire depuis ta page principale, mais le iframe se rechargera.

Il est n'est pas possible d'envoyer un fichier par query string (?cle=valeur&cle2=valeur).

https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects#Sending_files_using_a_FormData_object

Bonjour Steeve,
Dans la partie js, tu t'attends à recevoir un code 200 (OK) mais comme la partie php fait une redirection 303 via header Location ...
en php tu peux forcer le code de retour avec http_response_code
ou le rajouter en paramètre dans header

Je crois que son problème c'est qu'il ne reçoit même pas le fichier du côté serveur, dans la variable $_FILES.