envoi d'un file avec ajax et jQueru

19 août 2016 à 17:44:14

Salut,

J'ai un formulaire avec plusieurs champs ,et parmi ces champs il y en a un de type file . l'envoi du formulaire se fait a travers une requete ajax.

lorsque j'essaye de recuperer le fichier dans une variable en utilisant jQuery je ne recoit que le nom du fichier.Est ce que vous avez des idées??

voila comment je fais pour recuperer le fichier:

$candidat->setImageCandidat($imageName);

bryan33000

19 août 2016 à 17:46:43

Salut,

essaye de regarder de ce coté:

http://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax

Quand tu ne sais pas, Google reste ton meilleur ami ! ;)

bxdfr

20 août 2016 à 14:13:29

Salut, voici un exemple :

le HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
        <script src="js/libs/jquery/jquery.js" type="text/javascript"></script>         
        <script src="js/gestionInscription.js" type="text/javascript"></script>
    </head>
    <body>
        <div>
            <form id="formInscription" action="php/gestionInscription.php" method="post" enctype="multipart/form-data">
                <label for="nom" id="label-nom">Nom</label>
                <input type="text" name="nom" id="nom" required="required"/><br/>
                <label for="prenom" id="label-prenom">Prénom</label>
                <input type="text" name="prenom" id="prenom" required="required" /><br/>               
                <label for="photo" id="label-photo">Photo</label>
                <input type="file" name="photo" id="photo" /><br/>      
                <input type="reset" value="Effacer formulaire" />
                <input type="button" value="Envoyer formulaire Ajax" id="envoyerAjax" />                
            </form>
        </div>
    </body>
</html>

le js/jquery (gestionInscription.js):

$(function () {
	$("#envoyerAjax").click(function () {
        var donneesFormulaire = new FormData($("#formInscription").get(0));

        $.ajax({
            url: 'php/uploadImg.php',            
            data: donneesFormulaire,
            contentType: false,
            dataType: 'json',
            processData: false,
            cache: false,
            type: 'POST',
            success:
                    function (donnees, status, xhr) {
                        alert(donnees);
                    },
            error:
                    function (xhr, status, error) {
                        alert("param : " + xhr.responseText);
                        alert("status : " + status);
                        alert("error : " + error);

                    }
        });

    });
});

-
Edité par bxdfr 20 août 2016 à 14:15:27