Fonction qui ne se lance pas ? [Résolu]

[titimoi]

Bonjour,
Je suis à la recherche depuis quelques semaines d'un script simple qui permettrait aux utilisateurs d'uploader 3 images dans un dossier temporaire. J'aimerais montrer les images dans une miniature (permettre leur suppression) avant validation du formulaire global et déplacement des images vers un dossier final.

EDIT le 20/01/12 à 13:15 le problème actuel :

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, c'est que le script proposé 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 :

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 :

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 :

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"

[laurentSc]

Mon listing se mets à jour, (s'il y a des images dans uploads/ il les affiche) mais impossible d'uploader des images, pas d'erreur en console ou avec firebug et comme dit plus haut, je pense que mon php côté serveur n'est pas appelé, mais pourquoi..?

A mon avis, si tu includais aussi "upload_test1.php", ça risquerait plus d'appeler ce fichier...

pas d'erreur en console ou avec firebug

Bien que je ne sois pas spécialiste, comme c'est du PHP et pas du js, ça ne me surprend pas...

[titimoi]

Bonjour et merci pour ta réponse, je ne comprends pas ta demande en fait.
Dans ma page d'index, mon formulaire possède 'action="upload_test1.php"' donc a priori lorsqu'en JS on met $('formImg').submit(); cela devrait soumettre le formulaire et donc lancer la page en question n'est-ce pas ?

[laurentSc]

excuse-moi ; je n'avais pas vu que c'était l'action d'un formulaire, mais le fait qu'il n'y ait pas de champ submit explique peut-être que l'action ne soit pas appelée ; reboulette : je n'avais pas vu non plus le

Code :

$('formImg').submit();

dans la fonction "envoyer" ; mais pourquoi envois-tu ça dans une iframe ? Essaie pour voir de ne pas mettre de target (moi, je n'en aurais pas mise).
Et pour info, autrefois, quand j'avais eu à faire pareil : visu d'une image par une vignette, puis éventuellement upload, j'avais utilisé ce script jquery (un script js qui appelle une fonction PHP : je n'y aurais pas crû si on me l'avait dit...)

[titimoi]

Comme je l'ai dit en fait je débute, et j'ai besoin d'une base. ce code n'est pas de moi, mais je souhaite partir d'un truc simple, (j'ai déjà essayé de m'approprier un script jquery, et c'est trop compliqué, je préfère réinventer la roue) me l'approprier et le refaire à ma sauce. L'iframe ne sera bientôt plus là, c'est une vieille technique. je ferai l'affichage par le DOM joliment et en JS avec Jquery. Un fois que j'aurai compris pourquoi mon script php n'est pas lancé...

Pour l'histoire de la target.. je ne sais pas vraiment à quoi elle sert.. si je l'enlève, cela ne change rien.. Mon problème paraît "simple" étant donné que j'ai récupéré ce code, qui date un peu.. mais je n'arrive pas à savoir ce qui cloche, je ne suis pas encore assez calé en ce qui concerne l'appel de script externes et l'échange de données..

[SpaceFrog]

selecteur id en jquery = #

Code :

$('#formImg')

[titimoi]

rooh en voilà une bonne idée.. quel noob, merci bien, (celà dit c'est bizarre que je n'ai pas eu d'erreur) c'est corrigé.. mais ne change malheureusement pas mon souci..

[laurentSc]

un truc bête : dans ton formulaire, l'action est "upload_test1.php" et le nom du fichier est "Upload_test1.php". Renomme-le en "upload_test1.php"...

[SpaceFrog]

peut etre le fait de ne pas avoir de bouton submit ?

[laurentSc]

J'y avais déjà pensé à 15h05...Mais je ne crois pas.

[titimoi]

Disons que le script est censé marcher.. Là en l’occurrence ce n'est pas le cas, mais comme je vais de toute façon le changer en profondeur, si vous ne trouvez pas l'erreur, je vais passer outre, faire mes modifs et essayer de le faire fonctionner une fois qu'il est censé faire ce que je veux. De plus il sera un peu plus simple a priori. Merci en tout cas..

[laurentSc]

Oui, mais essaye quand même ce que je disais à 16h56 et dis nous...

[titimoi]

oups pardon je ne l'avais pas vu, le nom de mon fichier est bien upload.. erreur dans le premier post. Merci

[laurentSc]

Quand il y a un bug js, le script js est tout simplement non exécuté ; donc si la fonction "envoyer" est buguée, elle n'est pas exécutée (et l'upload n'est pas fait). Réduis la pour voir à la première ligne (et commente les 3 lignes avec document.getElementById) des fois que ces identifiants n'aient pas été créés...(on sait jamais...)

[titimoi]

Merci pour ton aide, j'ai commencé à couper dans le code, j'en avais marre de tourner en rond, donc j'ai commencé à tout transformer en objets jquery, passant outre les longs et fastidieux getElementById, voilà ce que j'ai (rassure toi cela n'a pas beaucoup changé):

index.php (ceci est inclus dans un form)

Code :

1
2
3
4
5
6
7
8
9
10
11
<div id="file-uploader">       
	Voici les fichiers deja presents :
	<div id="listing">
	</div>
	<form id="formImg" action="upload_test1.php" enctype="multipart/form-data" method="post">
		<input type="file" id="file" name="file" />
		<input type="button" id="btn" value="Envoyer" onClick="envoyer()"/>
		<div id="messageCallBack"></div>
	</form>
 
</div>

uploadAjax.js

Code :

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
var CS = {};
 
        CS.UploadAjax = function(){}
 
        CS.UploadAjax.callBack = function(message){
            $('#messageCallBack').innerHTML = message;
            $('#btn').value = 'Envoyer';
            $('#btn').disabled = false;
            $('#file').value = '';
            refresh_listing();
 
        }
 
        function envoyer(){
            $("#formImg").submit();
            $('#btn').disabled = true;
            $('#btn').value = 'Patientez...';
            $('#messageCallBack').innerHTML = "<b><i>Chargement en cours</i></b><br/><img src='img/loading.gif' />";
        }
 
        function refresh_listing(){
            var xhr_object = null;
 
			if(window.XMLHttpRequest) // Firefox
			   xhr_object = new XMLHttpRequest();
			else if(window.ActiveXObject) // Internet Explorer
			   xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
			else { // XMLHttpRequest non supporté par le navigateur
			   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
			   return;
			}
 
            xhr_object.open("GET", "upload_test1.php", true);
            xhr_object.onreadystatechange = function(){
                if ( xhr_object.readyState == 4 )
                {
                    document.getElementById(position).innerHTML = xhr_object.responseText;
                }
            }
            xhr_object.send(null);
        }

uplaod_test1.php

Code :

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
<?php
 
$extensions = array('.png', '.gif', '.jpg', '.jpeg');
$extension = strrchr($_FILES['file']['name'], '.'); 
 
if(!in_array(strtolower($extension), $extensions))
{
     $data['message'] = 'Vous devez uploader un fichier de type <b>png, gif, jpg, jpeg.</b>';
}
if(filesize($_FILES['file']['tmp_name'])>10000000)
{
     $data['message'] = '<b>Le fichier est trop gros...</b>';
}
if(!isset($data['message']))
{
     $fichier = strtr($fichier, 
          'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ', 
          'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
     $fichier = preg_replace('/([^.a-z0-9]+)/i', '-', $fichier);
     if(move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . basename($_FILES['file']['name'])))
     {
          $data['message'] = '<b>Upload de <i>'.$_FILES['file']['name'].'</i> effectu&eacute; avec succ&eacute;s !</b>';
     }
     else
     {
          $data['message'] = '<b>Echec de l\'upload !</b>';
     }
}
 
 
$data['page'] = 
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript">
window.parent.CS.UploadAjax.callBack("{message}");
</script>
</head>
<body>
</body>
</html>';
 
echo preg_replace('#\{([a-z0-9\-_]*?)\}#Ssie', '( ( isset($data[\'\1\']) ) ? $data[\'\1\'] : \'\' );', $data['page']);
?>

Voilà maintenant, je suis déterminé à faire fonctionner ça, je veux que lorsque l'on clique sur le bouton "envoyer", l'image soit uploadée et que j'intègre dans mon <div id="listing"> le lien vers cette image. Il y a certainement deserreurs, je pars de là et je rectifie. Donc en partant de là, le clique sur le bouton "envoyer" ne fais plus rien, j'ai donc un souci de syntaxe ou de compréhension dans mon

Code :

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

autre chose que je ne comprends pas, c'est le

Code :

1
2
3
var CS = {};
 
        CS.UploadAjax = function(){}

[titimoi]

La doc jquery m' aussi aidée, et voilà ce qui est dit :

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to <form> elements. Forms can be submitted either by clicking an explicit <input type="submit">, <input type="image">, or <button type="submit">

Mon <input type="button" ../> ne permettait donc pas de faire la soumission.. or si je mets un <button type="submit" ../> cela me valide mon formulaire mais rafraîchit la page ..

[Bovino]

Code :

$('#formImg').submit();

[laurentSc]

Je suis pris de court ; j'avais écrit ça :

Pour vérifier que la fonction "envoyer" est appelée quand tu cliques sur le bouton, mets dedans alert('envoyer') et commente le reste.

Mais en fait, et si au lieu de cette ligne

Code :

<input type="button" id="btn" value="Envoyer" onClick="envoyer()"/>

tu mettais

Code :

<input type="submit" id="btn" value="Envoyer"/>

tout simplement ? (j'ai pas changé le nom de l'id pour rester compatible avec le reste)
Pour Ajax, je ne peux t'aider, n'y connaissant rien.

[titimoi]

Merci pour ta réponse bovino mais c'est bel et bien ce que j'ai dans ma fonction envoyer() !

edit: Laurent. j'avais essayé de mettre des alert, et elles s'affichent, pour l'histoire de commenter le reste je ne comprends pas vraiment le but ? même si je mettais l'alert un peu plus loin dans le code, (après ce que tu souhaite que je commente) elle s'affichait aussi..

[laurentSc]

La mise en commentaires, c'était pour se prémunir d'un éventuel bug, mais que penses-tu de ma suggestion d'échanger les 2 lignes ?