Discussion :

[titimoi]

elle est bonne !

Je suis en train d'aller piocher un peu partout pour voir ce qu'il se fait.. et je tâtonne.. j'y connais rien en ajax non plus. Voilà ce sur quoi je suis en ce moment :
un formulaire simplifié, sans "action" et un button tout ce qu'il y a de plus simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<form id="formImg" action="" enctype="multipart/form-data" method="post">
	<input type="file" id="file" name="file" />
	<input type="submit" id="btn" value="Envoyer"/>

un code qui au clique du bouton submit fait un truc dans le genre :

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
 
$(function() {  
			$("#btn").click(envoyer());  
		}); 
 
function envoyer(){
			$("#btn").disabled = true;
			$("#btn").value = 'Patientez...';
			$("#messageCallBack").innerHTML = "<b><i>Chargement en cours</i></b><br/><img src='img/loading.gif' />"; 
            $.ajax({
			  type: "POST",
			  url: "upload_test1.php",
			  data: dataString,
			  success: function() {
				$('#contact_form').html("<div id='message'></div>");
				$('#message').html("<h2>Contact Form Submitted!</h2>")
				.append("<p>We will be in touch soon.</p>")
				.hide()
				.fadeIn(1500, function() {
				  $('#message').append("<img id='checkmark' src='images/check.png' />");
				});
			  }
			 });
			return false;
			}

c'est un code repris d'un formulaire d'envoie de mail qu'il faut que j'adapte.. je fais de mon mieux pour comprendre chaque champs et mettre ce qu'il faut dedans ! Après si ça fonctionne je passerai à mon php.. là non plus je ne suis pas maître dans cet art..

[laurentSc]

elle est bonne !

Quand j'ai lu ça, ne me rappelant pas du texte de mon dernier post, je me suis demandé de quelle blague tu parlais

Si tu écris

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form id="formImg" action="" enctype="multipart/form-data" method="post">

il y a quand même une action : le fichier qui contient le formulaire...

Le PHP, je ne suis pas un cador, mais je me débrouille (et à part les regexp (ça, je ne suis pas fort) le reste du code PHP me semble correct).

Et pour vérifier que quand tu cliques sur "envoyer", l'action est bien appelée, après le formulaire, mets :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php echo "envoyer<br>" ?>

[titimoi]

ah tiens, et pourquoi un bout de php après le formulaire attesterait de l'envoi ? Je ne comprends pas !

edit: je viens de lire qu'il est impossible de transférer des images avec la fonction ajax de jquery --> case départ, je vais m'aider soit d'une script nommé jquery.form soit je vais tenter avec mes maigres connaissance et XMLHTTPRequest..

edit2 : j'ai trouvé un script simple qui fonctionne pratiquement out of the box, il faut cependant que je trouve le moyen d'intégrer un formulaire dans un formulaire.. on s'égare un peu de ma question, je vais donc m'arrêter là pour ce thread

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$("#formImg").submit();
            $('#btn').disabled = true;

après le submit tu quittes la page ...
ce qui est après n'est pas interpété

[laurentSc]

ah tiens, et pourquoi un bout de php après le formulaire attesterait de l'envoi ? Je ne comprends pas !

D'après le code, l'action est dans le même fichier que le formulaire, donc je te propose de mettre dans ce fichier un petit affichage pour vérifier que l'action est bien effectuée...

je viens de lire qu'il est impossible de transférer des images avec la fonction ajax de jquery

Ca, j'en sais rien, mais au lieu d'appeler la fonction ajax dans "envoyer()", j'appelerais directement "upload_test1.php" et comme c'est du PHP, je modifierais un peu le code afin que l'action soit une fonction PHP, qui appelerait "upload_test1.php" puis "envoyer" (sans la fonction ajax !).

[titimoi]

Merci pour vos réponses, le fait que le submit() rende les fonctions suivantes inactives est intéressant, et compréhensible. Merci pour cette éclaircie.

L'avantage de l'ajax, c'est de pouvoir gérer les actions avant et après les requetes, pour pouvoir indiquer à l'utilisateur que l'upload est en cours, mais également, des plugin bien fait permettent de simplifier grandement le souci de rechargement de page, sans utiliser d'iframe. Du coup je reste dessus et m'y accroche !

J'ai de nouveau "tout" rechangé je vais utiliser le plugin jquery form, qui permet d'uploader des images et de récupérer l'url de l'image uploadée.

J'ai trouvé du code intéressant ici

Seul souci, le côté serveur utilise codelgniter que je ne connais pas du tout. J'ai donc essayé de transcrire ce code en php, pour le traitement de l'upload. voici mon code :

index.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<form id="up" action="upload_php.php" method="post" enctype="multipart/form-data">
		<input id="file" type="file" name="myFile">
		<div id="results"></div>
</form>

le script jp / jquery (j'ai suivi les exemples de l'API de JqueryForm) :

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
		<script type="text/javascript" src="lib/jquery.js" ></script>
			<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>
		<script type="text/javascript">
			$(document).ready(function()
			{   var options ={
					dataType:  'json', 
					beforeSubmit: function(){
					$('#results').html('<img src="img/loading.gif" id="waiting">'); // L'animation de chargement
					},
					success:function(data){
						$('#waiting').remove(); // on supprime l'animation de chargement
						// Si erreur est set à 1... on annule et on prévient
						if(data.erreur=='1'){
							$('#results').html(data.message); // On affiche le message d'erreur dans la div
						}
						// Si tout s'est bien passé, on affiche l'image
						else{
							$('#results').html('<img src="'+data.image+'" />');
						}
					}
 
				}
 
				$('#up').submit(function() { 
					// inside event callbacks 'this' is the DOM element so we first 
					// wrap it in a jQuery object and then invoke ajaxSubmit 
					$(this).ajaxSubmit(options); 
 
					// !!! Important !!! 
					// always return false to prevent standard browser submit and page navigation 
					return false; 
				}); 
 
				// A la selection d'une image, on submit automatiquement le formulaire
				$('#file').change(function() {
					$('#up').submit();
				});
			})    
	</script>

et enfin ce qui me pose problème, le script côté serveur pour l'upload (en commentaire, le code utilisant codelight)
upload_php.php

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<?php
 
function upload_file(){
 
	$upload_dir="uploads/";
	$extensions_valides = array( 'jpg' , 'jpeg' , 'gif' , 'png' );
	$maxsize=1024*1024;
 
	//test sur le transfert
	if ($_FILES['file']['error'] > 0) {
		$reponse['erreur'] = 1;
        	$reponse['message'] = "Erreur lors du transfert";
	}
 
	if ($_FILES['file']['size'] > $maxsize) {
		$reponse['erreur'] = 1;
        	$reponse['message'] = "Fichier trop gros";
	}
 
	$extension_upload = strtolower(  substr(  strrchr($_FILES['file']['name'], '.')  ,1)  );
 
	if ( !in_array($extension_upload,$extensions_valides) ) {
		$reponse['erreur'] = 1;
        	$reponse['message'] = "Fichier incorrect";
	}
 
	//Créer un identifiant difficile à deviner
	$nom = md5(uniqid(rand(), true));
	$nom = $nom.$upload_dir;
 
	//déplacement des fichiers
	$resultat = move_uploaded_file($_FILES['file']['tmp_name'],$nom);
	if (!$resultat) {
		$reponse['erreur'] = 1;
    		$reponse['message'] = "echec du transfert vers uploads.";
	}
	 if ($reponse['erreur']==1) {
	    // On fait l'echo de l'array en encodant en json
        	echo json_encode($reponse);
	}else {
		// On retourne l'url de l'image
		$img_url = base_url().$nom;
		$reponse['erreur'] = 0;
       		 $reponse['image'] = $img_url;
       		 // On fait l'echo de l'array en encodant en json
      		  echo json_encode($reponse);
	}
}
    // // Configuration upload de fichier
    // // $config['upload_path'] = 'uploads/'; // dossier où l'on stocke les fichiers
    // // $config['allowed_types'] = 'png|jpg|gif'; // type de fichiers, ici des images
    // // $this->upload->initialize($config);
 
    // // Si l'upload n'a pas réussi, on renvoit une erreur (1)
    // if(!$this->upload->do_upload()):
                    // // Important : les erreurs renvoyées par CodeIgniter sont pré-formatées en HTML, on vire donc les tags
        // $erreur = strip_tags($this->upload->display_errors());
        // // On prépare une array...
        // $reponse['erreur'] = 1;
        // $reponse['message'] = $erreur;
        // // On fait l'echo de l'array en encodant en json
        // echo json_encode($reponse);
    // else:
        // // Si le fichier a bien été uploadé, on renvoit 0 en erreur + les infos du fichier
        // $fileInfos = array('upload_data' => $this->upload->data()); // On crée une array pour faciliter la récupération d'infos fichier
        // $img_url = base_url().'uploads/'.$fileInfos['upload_data']['file_name']; // On va renvoyer ici l'adresse du fichier
        // // On prépare une array...
        // $reponse['erreur'] = 0;
        // $reponse['image'] = $img_url;
        // // On fait l'echo de l'array en encodant en json
        // echo json_encode($reponse);
    // endif;
}

Mon script js semble ok maintenant puisque firebug m'indique que la requete POST a été effectuée, mon gif indiquant que l'upload est en cours est également présent, le souci vient donc du php.. J'ai dû commette une erreur, utiliser une fonction inconnue.. je ne sais pas bien comment debuguer cela.. L'image n'est pas transférée dans mon dossier uploads/ en tout cas, il doit donc y avoir une erreur avant "//déplacement des fichiers"

[titimoi]

Mon souci est résolu, voir le post suivant : http://www.developpez.net/forums/d11...e/#post6464045