Récupération d'un fichier avec Ajax via un formulaire

ludivine
Invité n'ayant pas de compte PHPfrance

18 juin 2010, 16:42

Bonjour,

J'espère ne pas me tromper de rubrique pour ce problème.

Voilà, je développe un site internet web avec la partie back-office.
Au début l'administrateur a le choix entre ajouter, supprimer ou modifier une image. Puis, via Ajax, j'affiche un autre formulaire contenant un champ input file. Ensuite, je souhaite récupérer le fichier afin de le mettre sur le serveur ftp. Lorsque ce n'est pas géré par Ajax, pas de soucis. J'ai trouvé sur différents forums qu'il parlait de iframe, mais j'ai du mal à comprendre.

Voici le code (je me concentre sur la partie ajouter une image)
fichier formulaire.php

Code : Tout sélectionner

<tr> <td>Choix à effectuer</td> <td> <select name='typeMessage' id='typeM' onChange="javascript:makeRequest('repPhpAjax6.php','typeM','infoCompl',0,'');"> <option value='modifier'>Modifier les images</option> <option value='ajouter'>Ajouter une image</option> <option value='supprimer'>Supprimer une image</option> </select> </td> </tr> </table> <table width='600px' id='infoCompl'> </table>
fichier repPhpAjax6.php

Code : Tout sélectionner

echo " <tr> <td>Nom de l'image</td> <td> <input type='name' name='nom'> </td> </tr> <tr> <td>Image</td> <td> <input type='file' name='image'> </td> </tr> <tr> <td colspan='2' align='center' class='instruction'> Attention, les plaquettes doivent être des images (format jpg ou png) et de bonne qualité (pour l'agrandissement dans les popups). </td> </tr>"; echo "<div id='envoyer'> <input type='hidden' name='formulaire' value='ok'> <input type='submit' value='Ajouter'> </form>";
fichier formulaire.php

Code : Tout sélectionner

if($modif=="ajouter") { $nom=$_POST['nom']; $image=$_POST['image']; $fichier_destination_photo; $fichier_destination_vignette; echo $nom; // Calcul de l'id de la nouvelle photo pour ensuite l'insérer dans le nom de l'image de destination $query2 = "SELECT * FROM ActivCentrale;"; $result2 = mysql_query ( $query2 ); $donnees2 = mysql_fetch_array ( $result2 ); $nbImageAVenir = $donnees2["nbrePhotos"] + 1; $fichier=$_FILES["image"]["name"]; echo $fichier; echo $_FILES["image"]["name"]; echo $_FILES["image"]["tmp_name"]; $image=$_FILES["image"]["tmp_name"]; if(substr($fichier,-3) == "jpg" || substr($fichier,-3) == "JPG" || substr($fichier,-3) == "png" || substr($fichier,-3) == "PNG" ) { // ouverture en écriture ( 777 ) du répertoire de destination $permission = decoct(0777) ; $chmod_cmd = 'CHMOD '.$permission.' nouveauSite/images/activCentrale/photos' ; $chmod_cmd2 = 'CHMOD '.$permission.' nouveauSite/images/activCentrale/vignettes' ; $chmod = ftp_site( $conn_id, $chmod_cmd); $chmod = ftp_site( $conn_id, $chmod_cmd2); //Calcul des tailles initiales de la photo insérée $taille_initiale=getimagesize($image); $largeur_initiale=$taille_initiale[0]; $longueur_initiale=$taille_initiale[1]; // Calcul des tailles définies pour l'image de destination $largeur_destination_photo=343; $longueur_destination_photo=($largeur_destination_photo*$longueur_initiale)/($largeur_initiale); $largeur_destination_vignette=151; $longueur_destination_vignette=($largeur_destination_vignette*$longueur_initiale)/($largeur_initiale); // Création en mémoire de l'image de destination $image_en_memoire_photo = ImageCreateTrueColor ( $largeur_destination_photo, $longueur_destination_photo ) or die ("jojkojo"); $image_en_memoire_vignette = ImageCreateTrueColor ( $largeur_destination_vignette, $longueur_destination_vignette ) or die ("jhkhjjk"); // Conversion du fichier temporaire en image source mémoire $image_source_en_memoire; if(substr($fichier,-3) == "png" || substr($fichier,-3) == "PNG" ) { $image_source_en_memoire = ImageCreateFromPNG ( $image ) or die ("kjmk"); } else { $image_source_en_memoire = ImageCreateFromJPEG ( $image) or die ("khjbnvg"); } // Copie de l'image source mémoire dans l'image mémoire de destination ImageCopyResized ( $image_en_memoire_photo, $image_source_en_memoire, 0, 0, 0, 0, $largeur_destination_photo, $longueur_destination_photo, $largeur_initiale, $longueur_initiale) or die ("jgfhg"); ImageCopyResized ( $image_en_memoire_vignette, $image_source_en_memoire, 0, 0, 0, 0, $largeur_destination_vignette, $longueur_destination_vignette, $largeur_initiale, $longueur_initiale) or die ("gf"); // Nom du futur fichier de destination $fichier_destination_photo = "../images/activCentrale/photos/".$nbImageAVenir.".".substr($fichier,-3); $fichier_destination_vignette = "../images/activCentrale/vignettes/".$nbImageAVenir.".".substr($fichier,-3); echo $fichier_destination_photo; // Suppression des futurs fichiers de destination @unlink ( $fichier_destination_photo); @unlink ( $fichier_destination_vignette); // Enregistrement du fichier image de destination if(substr($fichier,-3) == "png" || substr($fichier,-3) == "PNG" ) { ImagePNG( $image_en_memoire_photo, $fichier_destination_photo, 90 ) or die ("se"); ImagePNG( $image_en_memoire_vignette, $fichier_destination_vignette, 90 ) or die ("pkk"); } else { ImageJPEG ( $image_en_memoire_photo, $fichier_destination_photo, 90 ) or die ("mp"); ImageJPEG ( $image_en_memoire_vignette, $fichier_destination_vignette, 90 ) or die ("ôkk"); } // Suppression des variables images en mémoire ImageDestroy ( $image_en_memoire_photo ); ImageDestroy ( $image_en_memoire_vignette ); ImageDestroy ( $image_source_en_memoire ); $permission = decoct(0755) ; $chmod_cmd = 'CHMOD '.$permission.' nouveauSite/images/activCentrale/photos' ; $chmod_cmd2 = 'CHMOD '.$permission.' nouveauSite/images/activCentrale/vignettes' ; $chmod = ftp_site( $conn_id, $chmod_cmd); $chmod = ftp_site( $conn_id, $chmod_cmd2); }
Le dernier fichier il y a un soucis il ne reconnaît pas $image et si je met $_FILES["image"]["tmp-name"], il y a toujours un soucis pour enregistrer l'image par la suite.

Merci d'avance pour votre aide.

Mammouth du PHP | 661 Messages

18 juin 2010, 17:25

J'ai trouvé sur différents forums qu'il parlait de iframe, mais j'ai du mal à comprendre.
en faite, le principe est que tu places dans ta page HTML une iFrame avec comme dimension 0px*0px et un atribut "name".
lors de l'envoi du formulaire (avec le input File) tu l'envoi sur l'iframe (target=iFrameName)

la réponse faite suite à l'upload du fichier doit etre faire en javascript (<script .. >) qui va appeler une fonction de la page principale en charge d'indiquer à l'utilisateur que le fichier s'est bien / ou pas bien déroulé !

pour uploadé tout en Ajax, c'est le meilleur/seul moyens !...

@++

Invité
Invité n'ayant pas de compte PHPfrance

21 juin 2010, 10:28

la réponse faite suite à l'upload du fichier doit etre faire en javascript (<script .. >) qui va appeler une fonction de la page principale en charge d'indiquer à l'utilisateur que le fichier s'est bien / ou pas bien déroulé !
Je ne comprend pas trè bien. Pour l'instant j'ai mis une iframe dans formulaire.php
Puis ds repPhpAjax6.php j'ai mis <form id='formulaire' name='formulaire' method='post' action='solutions.html' enctype='multipart/form-data' target='imageFrame'>.
Mais après je ne sais quoi faire, j'ai essayé http://www.siteduzero.com/tutoriel-3-47 ... #ss_part_6
mais une fois le script javascript lancé il ne retourne pas au php pour remettre à jour ma base de données.
Je suis un peu perdu est-ce que tu pourrai m'expliquer à l'aide d'un code ?
merci d'avance

Petit nouveau ! | 8 Messages

21 juin 2010, 10:31

c'était moi dsl
PS : je te remercie déjà de cette réponse

Petit nouveau ! | 8 Messages

21 juin 2010, 11:05

De plus, lorsque je met un target le formulaire a du mal à s'envoyer après.
(j'ai un test soit mon champ input hidden est nul alors j'affiche le formulaire sinon une autre page (dans laquelle je mets que les données ont bien été enregistrées)).
Merci de m'aider.

Mammouth du PHP | 661 Messages

21 juin 2010, 15:27

donc ... ce que tu dois faire c'est :

un formulaire contenant le champ files.

lorsque l'utilisateur va envoyer le formulaire celui-ci est transmis au serveur php via l'iframe (ton iFrame doit avoir un attribut name="imageFrame" pour pouvoir accueillir le target)

la page de ton iFrame va donc envoyer les données au serveur, mais, peu importe ce que celui-ci va répondre, personne ne pourra le voir à l'écran, vu que ce sera affiché dans l'iframe (0px*0px) ...
Donc il faudrait que le serveur renvoi un code javascript pour que la fenetre parent puis savoir ce qu'il a répondu, et ensuite, puisse afficher la réponse !...

en attendant, tu peux trés bien regarder dans le code source (dynamique) pour voir ce que le serveur à répondu...

une fois que tu aura une réponse, on pourra travailler sur le Javascript ! ;)

Petit nouveau ! | 8 Messages

21 juin 2010, 16:09

Fichier solutions.php

Code : Tout sélectionner

<?php $query = "SELECT * FROM Solution"; $result = mysql_query($query); if (!$result) { echo "Lecture impossible"; } else { echo "<div id='contenuPage'>"; include("filAriane.php"); echo "isset".!isset($_POST['formulaire']); if(!isset($_POST['formulaire'])) { echo "<div id='activCentrale'> <form id='formulaire' name='formulaire' method='post' action='solutions.html' enctype='multipart/form-data' target='imageFrame'> <table width='600px'> <tr> <td>Solution</td> <td>"; ?> <select name='solution' id='solP' onChange="javascript:makeRequest('repPhpAjaxSolution.php','solP','infoCompl',0,'');"> <?php while($donnees = mysql_fetch_array($result)) { $typeSolution=$donnees['typeSolution']; switch($typeSolution) { case 0:echo "<option value='".$donnees['idSolution']."'> Accueil </option>"; break; case 1:echo "<option value='".$donnees['idSolution']."'> Gestion de contenu </option>"; break; case 2:echo "<option value='".$donnees['idSolution']."'> Matériel, logiciel... </option>"; break; case 3:echo "<option value='".$donnees['idSolution']."'> Ecrans LCD </option>"; break; case 4:echo "<option value='".$donnees['idSolution']."'> Offre santé </option>"; break; case 5:echo "<option value='".$donnees['idSolution']."'> Offre hôtellerie </option>"; break; } } echo " </select> </td> </tr> </table> <table id='infoCompl'> </table> <div id='messageCallBack'></div>"; echo "</div> </div>"; } else { echo $imageFrame; ?> <script type="text/javascript"> window.parent.CS.UploadAjax.callBack('fichier envoyé avec succès') </script> <?php $texteModif=$_POST['texte']; $image; $texte; $typeSolution; echo $texteModif; echo "jkhklhkjhjhhh"; //on récupère seulement l'id de la solution $id=$_POST['solution']; $query = "SELECT * FROM Solution WHERE idSolution='".$id."';"; $result = mysql_query($query); if (!$result) { echo "Lecture impossible"; } else { $donnees = mysql_fetch_array($result); $texte=$donnees['texteSolution']; $image=$donnees['imageSolution']; $typeSolution=$donnees['typeSolution']; } $intitule; switch($typeSolution) { case 0 : $intitule="Accueil"; break; case 1: $intitule="Gestion de contenu"; break; case 2: $intitule="Matériel, logiciel..."; break; case 3: $intitule="Ecrans LCD"; break; case 4: $intitule="Offre santé"; break; case 5: $intitule="Offre hôtellerie"; break; } $imageModif=$image; echo $intitule; //pour l'image if($_POST['btnRadio']=="modifier") { echo "llal"; $fichier=$_FILES["image"]["name"]; echo $fichier; if(isset($_FILES['image']) && $_FILES['image']['error'] == 0) { if($fichier!="") { if(substr($fichier,-3) == "jpg" || substr($fichier,-3) == "JPG" || substr($fichier,-3) == "png" || substr($fichier,-3) == "PNG" ) { // ouverture en écriture ( 777 ) du répertoire de destination $permission = decoct(0777) ; $chmod_cmd = 'CHMOD '.$permission.' nouveauSite/images/solutions/' ; $chmod = ftp_site( $conn_id, $chmod_cmd); //Calcul des tailles initiales de la photo insérée $taille_initiale=getimagesize($image); $largeur_initiale=$taille_initiale[0]; $longueur_initiale=$taille_initiale[1]; // Calcul des tailles définies pour l'image de destination $largeur_destination=100; $longueur_destination=($largeur_destination*$longueur_initiale)/($largeur_initiale); // Création en mémoire de l'image de destination $image_en_memoire = ImageCreateTrueColor ( $largeur_destination, $longueur_destination ); // Conversion du fichier temporaire en image source mémoire $image_source_en_memoire; if(substr($fichier,-3) == "png" || substr($fichier,-3) == "PNG" ) { $image_source_en_memoire = ImageCreateFromPNG ( $image ); } else { $image_source_en_memoire = ImageCreateFromJPEG ( $image ); } // Copie de l'image source mémoire dans l'image mémoire de destination ImageCopyResized ( $image_en_memoire, $image_source_en_memoire, 0, 0, 0, 0, $largeur_destination, $longueur_destination, $largeur_initiale, $longueur_initiale) ; // Nom du futur fichier de destination $fichier_destination = "../images/solutions/image".$typeSolution.".".substr($fichier,-3); //Pour récupérer seulement le nom de l'image pour ensuite l'insérer dans la BDD $imageModif=$fichier_destination; // Suppression des futurs fichiers de destination @unlink ( $fichier_destination); // Enregistrement du fichier image de destination if(substr($fichier,-3) == "png" || substr($fichier,-3) == "PNG" ) { ImagePNG( $image_en_memoire, $fichier_destination, 90 ); } else { ImageJPEG ( $image_en_memoire, $fichier_destination, 90 ); } // Suppression des variables images en mémoire ImageDestroy ( $image_en_memoire ); ImageDestroy ( $image_source_en_memoire ); $permission = decoct(0755) ; $chmod_cmd = 'CHMOD '.$permission.' nouveauSite/images/solutions/' ; $chmod = ftp_site( $conn_id, $chmod_cmd); } } else { $imageModif=NULL; } } } //mise à jour de la BDD $query; if($imageModif==NULL) { $query = "UPDATE Solution SET texteSolution='".$texteModif."', imageSolution=NULL WHERE idSolution=".$id.";"; } else { $query = "UPDATE Solution SET texteSolution='".$texteModif."', imageSolution='".$imageModif."' WHERE idSolution=".$id.";"; } $result = mysql_query($query); echo $query; echo " <p> Vos données ont été mises à jour </p> <p> pour la solution ".$intitule." : </p>"; if($texte!=$texteModif) { echo "<p> Le texte de la solution est maintenant ".$texteModif.". </p>"; } if($_POST['btnRadio']=="modifier" && $imageModif!=NULL) { echo "<p> L'image de la solution est maintenant <p><img src='".$imageModif."'/></p> </p>"; } } ftp_close($conn_id); } mysql_close(); ?>
fichier index.php

Code : Tout sélectionner

<html> <head> <title> Administration du site </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type='text/javascript'> var CS = {}; CS.UploadAjax = function(){} CS.UploadAjax.callBack = function(message){ document.getElementById('messageCallBack').innerHTML = message; alert(document.getElementById('imageFrame').contentDocument.getElementById('contenu').innerHTML); } </script> </head> <body> <div id="banniere"> </div> <div id="contenu"> <?php $page = $_GET['page']; include ( $page.'.php' ); ?> <iframe name='imageFrame' id='imageFrame' width='0px' height='0px' style='display:none;'> </iframe> <div id="piedPage"> </div> </div> </body> </html>
repPhpAjaxSolution.php

Code : Tout sélectionner

<?php header("Content-Type: text/html; charset=iso-8859-15"); //recup de la valeur postee par Ajax $idSolution=$_POST['val_sel']; include_once("../connexion/param.php"); mysql_connect($host, $user,$passwd) or die("erreur de connexion au serveur"); mysql_select_db($bdd) or die("erreur de connexion a la base de donnees"); $query = "SELECT * FROM Solution WHERE idSolution='".$idSolution."';"; $result = mysql_query($query); if (!$result) { echo "Lecture impossible"; } else { $donnees = mysql_fetch_array($result); $texte=$donnees['texteSolution']; $image=$donnees['imageSolution']; echo " <tr> <td>Texte</td> <td> <textarea name='texte' cols='40' rows='15'>".$texte."</textarea> </td> </tr> <tr> <td colspan='2' height='10px'> </td> </tr> <tr> <td colspan='2' align='center'> Image </td> </tr> <tr> <td colspan='2' align='center'> <input type='radio' name='btnRadio' value='conserver' checked='checked' onClick='grise(this.form.btnRadio)'> conserver l'image </td> </tr>"; if($image!=NULL) { echo " <tr> <td colspan='2' class='image' align='center'> <img src='".$image."'></td> </tr>"; } echo " <tr> <td colspan='2' align='center'> <input type='radio' name='btnRadio' value='modifier' onClick='grise(this.form.btnRadio)'>modifier l'image </td> </tr> <tr> <td colspan='2' align='center'> Image <input type='file' name='image' disabled='true' > </td> </tr> <tr> <td colspan='2' height='10px'> </td> </tr> "; echo "<div id='envoyer'> <input type='hidden' name='formulaire' value='ok'> <input type='submit' value='Modifier'> </form>"; } mysql_close(); ?>
Je suis complètement perdu comment faut-il faire pour afficher le contenu de l'iframe en php (j'ai seulement vu en javascript iframe.contentDocument)
Merci de ton aide (je galère depuis ce matin)

Petit nouveau ! | 8 Messages

21 juin 2010, 16:52

Le problème est surement dû au fait que mon champ input file s'affiche selon une liste déroulante présente (Ajax)
Merci de m'aider je ne sais pas si c'est possible.