Action JS pour une prévisualisation d'image dans un formulaire

merci Yuh12.
Saurais-tu où je pourrais trouver une référence à ce sujet en AJAX ?
tutoriel, exemple etc.....
J'ai un peu cherché, mais je ne sais pas bien comment formuler la recherche.

J'ai finalement trouvé des sources traitant du sujet et je te remercie de m'avoir mis sur la voie.

Pour l'explication globale, tu va avoir un fichier PHP "flottant" ce que je veux dire par là qu'il va juste servir à interpréter du code PHP mais sur ton site personne ne pourra y accéder.

Donc tu as ta page html (ou php) avec le traitement de l'image la page de base donc.
On va dire image.php


Tu as un fichier javascript avec une fonction ajax (on y vient) qui intervient dès lors d'un clic sur le bouton envoyer par exemple :

$('.mon_objectif').click(function()
{
	var clic=true; // cette variable ne sert à rien je la transmet juste a ajax.php pour montrer que c'est possible
	$.ajax({
		type: "POST",
		url: "./ajax.php",
		dataType: "json",
		data: "donnee="+clic,
		success: function(data)
		{
			content=""; 
			if (data=="tab_empty")
				console.log("pas de retour");
			else 
			{
				// Instructions avec data qui contient les informations de ajax.php donc affichage de la nouvelle 

				// On utilise les données récupérées par ajax.php (voir en dessous)
				data.forEach(function(entry)
				{
					id 	= entry[0];
					link = entry[1];
					title = entry[2];

					content+="<div class='block_image'>";
						content+="<h6>"+title+"</h6>";
						content+="<img alt='image numero "+id+"' src='"+link+"'>";
					content+= "</div>";

				});
				$(".affiche_image").html(content); // on affiche la nouvelle image dans la section qui nous interesse
			}
		}
	});
});

Et enfin tu as ta page PHP spécial ajax dans laquelle tu veux modifier des éléments "en live" !

Admettons ajax.php

	
if(isset($_POST['donnee'])) // c'est la data que ajax lui envoi avec le clic=true (par exemple)
	{
		$bool=$_POST['donnee']; // donc true (ne sert à rien dans cet exemple juste pour montrer qu'on peut faire passer variables de l'ajax à l'ajax.php)

		$tab=recup_infos_img(); // fonction qui contient un SELECT de tes images et qui renvoi un tableau avec les données qui t'interessent.

		if(!empty($tab))
		{
			foreach($tab as $ligne)
			{	
				$id=$ligne['id_img'];
				$link=$ligne['lien_img'];
				$title=$ligne['title_img'];
				
				array_push($retour, array($id,$link,$title));
			}
			echo json_encode($retour); // Manière de réenvoyer un tableau d'infos en live à ajax dans la fonction success (si ça marche).
		}
		else
			echo json_encode("tab_empty");
	}

Ce site peut certainement t'aider !
http://jquery.developpeur-web2.com/documentation/ajax/$.ajax.php

merci Yuh12 de tes explications. j'assimile doucement et j'essaie de comprendre.
J'aurai probablement des explications à te demander ultérieurement.
J'ai un bouquin de Javascript, qui traite un peu d'AJAX pour m'aider, mais comme je ne suis pas un expert en JS, c'est un peu dur ......

Oui ! Mais c'est tellement cool que tu ne pourra plus t'en passer :) !
ça vaut le coup, courage, et n'hésite pas pour les questions.

Pour ce qui est du fichier PHP ajax.php Il peut être ou tu veux !
Si tu le met à la racine dans ta fonction ajax ce sera :

	$.ajax({
		type: "POST",
		url: "./ajax.php", // A cet endroit !
		dataType: "json",
		data: "donnee="+clic,
		success: function(data)
		{ ...

Sinon :

url: "./mon_chemin/dossier_ici/puis_la_bas/ajax.php",

J'y suis presque :
le script se déclenche bien sur un click sur le input file.
Maintenant je ne sais pas afficher la photo sélectionnée.
Qu'est ce que je dois mettre comme div dans mon formulaire ?
<div class='block_image'></div> -----> je ne reçois rien.
<div class='affiche_image'></div> ----> idem.

$(".affiche_image").html(content); // on affiche la nouvelle image dans la section qui nous interesse

Je comprends : on affiche dans une div de class "affiche_image" le contenu de html(content) ?????

Exactement :D !

Dans ta :

<div class='affiche_image'></div>

Tu va essayer d'afficher le contenu suivant (c'est à dire le contenu récupéré depuis le fichier ajax.php par ta fonction $ajax présente dans ton javascript ! )

content+="<div class='block_image'>";
  content+="<h6>"+title+"</h6>";
  content+="<img alt='image numero "+id+"' src='"+link+"'>";
content+= "</div>";

Grâce au

$(".affiche_image").html(content);

Un truc assez pénible en ajax, tu ne peux pas voir les erreurs de ajax.php donc pour tester ce que tu as fait dans ce fichier (soit une récupération des informations de l'image que tu veux afficher) il faut que tu affiches ce qu'il renvoie.

Dans ta fonction $ajax tu va donc faire (quand tu veux faire des tests) :

$.ajax ( {
  type: "POST",
  url: "./ajax.php",
  dataType: "json",
  data: "donnee="+clic,
       
         success: function(data){
           console.log(data); // On regarde ce qu'il y a dans data dans la console et de temps en temps il y a des erreurs PHP affichées ici si le code de ajax.php est faux.
         },
         error: function(data{
            console.log(data); // On regarde aussi si cela ne crée pas une réponse négative pour le js grâce à la méthode error. 
         }
      });

La magie n'opère toujours pas !... Je me résouds à te donner mon code pour correction, car là je patine sérieux .... Pas d'affichage de div, pas d'affichage console ??..

<form method = "post" action = "modifs.php" enctype="multipart/form-data"><!-- action neutralisée pour l'essai-->
	<input type="image" src ="<?php echo $chemin1."?".filectime($chemin1);?>" id ="Mr" name ="Mr" alt ="Mr." style="vertical-align: middle;border:solid 1px silver;border-radius:10px; width:60px;height:60px;background-color:#CCC;" onclick="$('#InputFileM').click();return false;"/>
	<input type="image" src ="<?php echo $chemin2."?".filectime($chemin2);?>" id ="Mme" name ="Mme" alt ="Mme."  style="vertical-align: middle;border:solid 1px silver;border-radius:10px; width:60px;height:60px;background-color:#CCC;" onclick="$('#InputFileF').click();return false;"/>
	<input type="file" id="InputFileM" name = "M" style="visibility:hidden"/>
	<input type="file" id="InputFileF" name = "F" style="visibility:hidden"/><br><br>
	<INPUT type="submit" value="Valider vos modifications"/>
</form>
<div affiche_image></div>

<script>

$('#InputFileM').click(function()
{
	var clic=true; // cette variable ne sert à rien je la transmet juste a ajax.php pour montrer que c'est possible
	$.ajax({
		type: "POST",
		url: "./ajax.php",
		dataType: "json",
		data: "donnee="+clic,
		success: function(data){
			console.log(data); // On regarde ce qu'il y a dans data dans la console et de temps en temps il y a des erreurs PHP affichées ici si le code de ajax.php est faux.
         	},
			error: function(data{
            console.log(data); // On regarde aussi si cela ne crée pas une réponse négative pour le js grâce à la méthode error.  
         
			if (data=="tab_empty")
				console.log("pas de retour");
			else 
			{
				// Instructions avec data qui contient les informations de ajax.php donc affichage de la nouvelle 

				// On utilise les données récupérées par ajax.php (voir en dessous)
				data.forEach(function(entry)
				{
					id 	= entry[0];
					link = entry[1];
					title = entry[2];

					content+="<div class='block_image'>";
						content+="<h6>"+title+"</h6>";
						content+="<img alt='image numero "+id+"' src='"+link+"'>";
					content+= "</div>";

				});
				$(".affiche_image").html(content); // on affiche la nouvelle image dans la section qui nous interesse
			}
		});
	});
});

Le cheminement de mon raisonnement :
J'ai une image src ="<?php echo $chemin1."
Je désire éventuellement la changer.
Si je clique dessus, je souhaite avoir le choix d'une autre image ----> donc je souhaite que me soit présenté le "parcourir".
Pour cela je fais un onclick sur l'image pour que cela me présente le "parcourir", parce que le onclick m'emmène au InputFileM
Pour l'instant, il n'y a pas d'image proposée, donc pas de déclenchement de l'ajax.
Lorsque "parcourir" m'a été proposé, je choisis un fichier, et c'est là que j'attribue à
<input type="file" id="InputFileM" name = "M" style="visibility:hidden"/>
la valeur du fichier choisi.
d'où le déclenchement de l'Ajax : $('#InputFileM').click(function()
Je considérais jusqu'à présent que le clic se faisait sur le 'choisir' du parcourir !.....
puisque c'est lui qui attribuait à l'inputFileM sa valeur.
Là, je ne distingue pas bien les futilités des clics.
C'est peut-être là que réside l'incompréhension.....


Par contre, je viens de tester la non présence du click() dans
onclick="$('#InputFileM').click();return false;"/>
ça ne marche pas, car ça ne me propose pas la fenêtre "parcourir" de recherche .

Pris d'un doute avec les versions de jQuery, j'ai mis dans mon head les chargements de bibliothèque jQuery, tels que tu me les as indiqués .

<script type="text/javascript" src ="http://code.jquery.com/jquery-1.11.3.min.js"/></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

Dans la console, j'obtiens :
reflow : 0.37ms fonction m.event.fix, jquery-1.11.3.min.js ligne 4
Il semble que ce soit une erreur qui fait 1 km de long !....
J'ai lu quelque part qu'il existe des conflits avec diverses versions de jQuery.
Est-ce là le problème ?

Non je ne voulais pas dire d'en ajouter deux... Il vont se mettre en conflit.

Mon message c'était de télécharger le fichier à cette adresse :
http://code.jquery.com/jquery-1.11.3.min.js

Et l'inclure de cette marnière :

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

Après oui j'ai écrit jquery-1.11.0.min.js et je comprend que le 1.11.0 ait porté à confusion..

J'ai copié coller ma ligne de code et je suis aller chercher le dernier lien jquery donc comme je suis pas à jour à 3 versions près voilà.. mais il faut vraiment n'en inclure qu'un seul.

OK, j'avais rectifié tout seul. Merci quand même.
Je continue.

Peut-être que ce lien pourra t'aider.
http://chez-syl.fr/2015/02/jquery-uploader-une-image-en-ajax-avec-un-apercu-avant-envoi/

C'est un tuto qui se rapproche de ce que tu veux faire je pense.