IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Method 'POST' / image [AJAX]


Sujet :

jQuery

  1. #1
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Novembre 2013
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2013
    Messages : 12
    Points : 13
    Points
    13
    Par défaut Method 'POST' / image
    bonjour,

    J'aimerai récupérer une image postée sur un formulaire dans un fichier ouvert avec ajax. Cepedant, 'avatar' n'est pas défini dans le fichier ajax. Pouvez vous m'aidez s'il vous plait ?

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <html>
     
    <head>
    <title>Test images</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
    </head>
    <body>
    <form method="post" action="resultats.php"  onsubmit="return valider()" id="formulaire_test" enctype="multipart/form-data">
    	<input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
    	<input type="file" name="avatar" id="avatar"/>
    	<p></br></p>
    	<input type="submit" value="valider" />
    </form> 
    </body>
    </html>

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function valider(){
    	$.ajax({
    		url: 'ajaximage.php',
    		type: 'POST',
    		success: function(data){
    			if(data=="ok"){
    				alert('ca marche');
    				var valider=true;
    			}
    			else{
    				var valider=false;
    				alert('Veuillez vérifier la taille, l\'extension et le poids de l\'image');
    			}
    		}
    	});
    	return valider;
    }
    Ici, le fichier ajaximage.php

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <?php
     
    //Vérification de l'extension
    $extensions_valides = array( 'png' );
    $extension_upload = strtolower(  substr(  strrchr($_FILES['avatar']['name'], '.')  ,1)  );
    if ( in_array($extension_upload,$extensions_valides) ){
    	$exten=true;
    }
    else{
    	$exten=false;
    }
     
    //Vérification de la taille
    $image_sizes = getimagesize($_FILES['avatar']['tmp_name']);
    if ($image_sizes[0] == 50 AND $image_sizes[1] == 50){
    	$taille=true;
    }
    else{
    	$taille=false;
    }
     
    if($taille AND $exten){
    	echo "ok";
    }
    else{
    	echo "pas ok";
    }
    ?>

    Merci de votre aide

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Tu mélanges beaucoup de choses là.

    D'abord, tu fais une requête avec la méthode POST, mais tu demandes en PHP le tableau $_FILES.
    Ensuite, tu envoies une requête POST, mais tu n'associes aucun paramètre dans la requête, tu ne risques pas de recevoir grand chose côté serveur !
    Tu sembles du coup croire qu'il suffut d'envoyer une requête AJAX pour ques les données du formulaire y soient associées, ce n'est pas le cas, loin de là !
    Enfin, on ne peut pas récupérer et envoyer une image avec AJAX de cette façon. Un champ file est très particulier et ne se gère pas comme les autres (pour preuve, la récupération côté serveur est elle aussi très spécifique).

    Bref, il existe des solutions (utilisation de l'API JavaScript FileReader), mais je te conseille au préalable d'apprendre à utiliser AJAX, comment ça fonctionne, quelles sont les limitations avant de te lancer dans des projets pour lesquels tu n'as pas encore les connaissances requises.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Novembre 2013
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2013
    Messages : 12
    Points : 13
    Points
    13
    Par défaut
    Bonjour,

    J'ai appris à coder sans aucun professeur. Il est donc normal que j'ai des lacunes. De plus, j'ai du mal à trouver des tutos corrects pour ajax. J'apprend en lisant des bribes de codes vues par ci par là.

    Si vous aviez un lien expliquant en détail la méthode post avec ajax, je suis preneur ! En effet, j'aimerai savoir associer une requête formulaire à ajax! Mon $_FILE, fonctionne sur la page resultats.php

    Par contre, ce n'est pas sympa de démonter quelqu'un qui cherche à apprendre

  4. #4
    Membre expérimenté
    Profil pro
    Inscrit en
    Mars 2002
    Messages
    1 132
    Détails du profil
    Informations personnelles :
    Âge : 52
    Localisation : France

    Informations forums :
    Inscription : Mars 2002
    Messages : 1 132
    Points : 1 418
    Points
    1 418
    Par défaut
    Bonjour,

    Pour compléter la réponse de Bovino...

    Ce que tu veux faire est relativement complexe, il faut bien identifier les différentes parties et ne pas essayer de tout faire d'un coup (sinon tu risques de ne pas trouver d'où vient le problème quand ça ne fonctionne pas)

    Essaye de procéder comme suit :

    1- [HTML+PHP] Faire une première version de ton upload de fichier (ton image) avec un submit "classique" de ton formulaire et ton code PHP.
    Tu devrais trouver assez facilement des tutos expliquant comment faire un upload en PHP.

    2- [PHP] Ajouter en réponse de ta requête upload le fichier reçu.

    3- [JavaScript] Transformer ton upload pour qu'il envoie le fichier non plus par submit du formulaire mais par AJAX.
    Comme te l'expliquait Bovino, il faut d'abord comprendre comment fonctionne une requête AJAX.
    Mais là encore tu devrais pouvoir trouver des tutos expliquant comment faire un upload en AJAX.


    4- [JavaScript] Afficher la réponse dans ta page lors de la réponse AJAX.

    Bon courage et n'hésite pas à revenir nous voir


    devYan.

  5. #5
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Novembre 2013
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2013
    Messages : 12
    Points : 13
    Points
    13
    Par défaut
    Bonjour Yvan,

    Tout d'abord merci de votre courtoisie.

    Ensuite, j'ai regardé la méthode formulaire "submité" avec ajax mais ça me parait beaucoup plus dur que ce que propose Bovino. Vous avez tous les deux raisons c'est plutôt difficile. J'ai donc rédigé un code en javascript avec sa méthode. Cependant, l'alert signalant que l'image n'est pas en png ne fonctionne pas. Pouvez vous y jeter un coup d'oeil ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
     
    window.onload = function() 
    {
    	var width=0;
    	var height=0;
     
    	var fileInput = document.getElementById('fileInput');
     
    	fileInput.addEventListener('change', function(e) 
    	{
    		var file = fileInput.files[0];
    		var imageType = /image.png/;
     
    		if (file.type.match(imageType)) 
    		{
    			var reader = new FileReader();
     
    			reader.onload = function(e) 
    			{
    				var img = new Image();
    				img.src = reader.result;
     
    				img.onload = function()
    				{
    					width=this.width;
    					height=this.height;
    					if(width == 50 && height ==50)
    					{
    						alert('Your image is ok.');
    					}
    					else
    					{
    						alert('Image needs to be 50*50px');
    					}
    				}
    			}
    		} 
    		else 
    		{
    			alert('Images needs to be in png.');
    		}
    	});
    }
    Merci de votre aide.

  6. #6
    Membre expérimenté
    Profil pro
    Inscrit en
    Mars 2002
    Messages
    1 132
    Détails du profil
    Informations personnelles :
    Âge : 52
    Localisation : France

    Informations forums :
    Inscription : Mars 2002
    Messages : 1 132
    Points : 1 418
    Points
    1 418
    Par défaut
    Apparemment tu es parti pour le faire toi même (ce qui est une bonne façon de bien comprendre le mécanisme)
    Sinon, il existe également plusieurs plugins jQuery pour faire cela ( donne de bons résultats avec les mots clefs "jquery upload ajax")

    En ce qui concerne ta question sur la détection, je n'ai pas noté de problème ni avec Firefox, avec Chrome.


    devYan.

  7. #7
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Novembre 2013
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2013
    Messages : 12
    Points : 13
    Points
    13
    Par défaut
    C'est étrange sur mon chrome ça ne s'affiche pas. Je dois avoir une merde sur mon PC.

    Eh oui, je fais quasiment tout moi même et je n'ai pas peur de la difficulté même si il faut savoir rester simple ^_^

    Merci de votre temps en tout cas !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [HTTP]passage de parametres via la methode post
    Par abdou.sahraoui dans le forum Entrée/Sortie
    Réponses: 3
    Dernier message: 03/03/2008, 15h11
  2. [HTTP] Passage d'image via la methode post
    Par muldoon dans le forum Entrée/Sortie
    Réponses: 2
    Dernier message: 26/05/2005, 10h05
  3. Protocole HTTP: methode POST
    Par Nyx dans le forum Général Conception Web
    Réponses: 15
    Dernier message: 01/04/2005, 18h45
  4. [Servlet] Form. Methode POST - Erreur 405
    Par Johnbob dans le forum Servlets/JSP
    Réponses: 3
    Dernier message: 03/11/2004, 17h46
  5. Passage de variable par methode post ?
    Par oazar dans le forum Flash
    Réponses: 33
    Dernier message: 16/10/2003, 18h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo