Script php de transfert après upload d'image ne fonctionne pas !

**titimoi** · 20/01/2012, 14h31

Bonjour,
J'utilise le plugin jquery form, côté client, il permet d'uploader des images et 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 et c'est là que cela coince. 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 que j'ai essayé de traduire)
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 de syntaxe, ou 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".. mais je ne sais pas où..

**Nowwis** · 20/01/2012, 14h48

A première vue, je dirais que le fichier PHP appelé par l'AJAX n'a qu'une fonction, donc rien ne s'execute...

Essaie de remplacer ton fichier upload.php par :

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
74
75
76
<?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;
}
$reponse['erreur'] = 1;
$reponse['image'] = "Le PHP a bien été appelé, mais la fonction n'est pas executé, et c'est logique";
echo json_encode($reponse);

Donne nous la réponse

**ska_root** · 20/01/2012, 15h14

Bonjour,

Effectivement je ne crois pas que tu aies besoin de créer une méthode upload_file() dans le fichier upload_php.php... du moins avec Prototype, tu ne le fais pas...

Sinon, ça ne serait pas à cause de ça ? :

Code :

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

$nom = $nom.$upload_dir;

devrait être :

Code :

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

$nom = $upload_dir.$nom;

**titimoi** · 20/01/2012, 17h01

Bonjour et merci pour vos suggestions. Alors j'ai essayé de rajouter

Code :

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

1
2
3
$reponse['erreur'] = 1;
$reponse['message'] = "Le PHP a bien été appelé, mais la fonction n'est pas executée, et c'est logique";
echo json_encode($reponse);

et je n'ai pas d'erreur, en revanche mon message ne s'affiche pas.
Si je l'enlève, j'ai alors une erreur de firebug qui me dit data=null soit, la fonction callback n'a rien reçu !

Je suppose donc qu'il faut simplement que je supprime ma fonction ?

(pour le $nom, j'avais en effet fait une erreur !)

**Nowwis** · 20/01/2012, 17h12

Donc ça vient bien de là...

Maintenant, tu encodes en json mais tu ne décodes pas... forcément ça foire aussi.
Avec json par exemple :
function success jquery

Code :

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

var dataresponse = $.parseJSON(data);

Donc :

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
<?php
	$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);
	}

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
		<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){
var dataresponse = $.parseJSON(data);
						$('#waiting').remove(); // on supprime l'animation de chargement
						// Si erreur est set à 1... on annule et on prévient
						if(dataresponse.erreur=='1'){
							$('#results').html(dataresponse.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="'+dataresponse.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>

EDIT :
j'avais pas vu ton dataType... Si jamais ça ne marche pas, ce qui ne m'étonnerait pas, essaie d'enlever ce dataType... On verra bien ^^'

**titimoi** · 20/01/2012, 17h28

merci pour la rapidité !

Alors, bizarre bizarre, retour à la case départ.. on dirait que cela n'aboutit pas.. j'ai la requette envoyée, mais mon gif est toujours là et aucune image n'est déplacée vers uploads.. donc le script ne renvoi rien. Voilà mes fichiers actuellement (décodage de json ajouté, pour l'histoire du datatype, ça viens d'ici aussi : la) :

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
<?php
$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 = $upload_dir.$nom;
 
//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;

index.php avec le script jquery à la fin

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
</form>
				<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>
		</section>
 
		<div id="footer">
			le footer
		</div>
		<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(dataresponse){
						var data = $.parseJSON(dataresponse);
						$('#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>

EDIT: si je vire le dataType, firebug me donne une erreur json.parse unexpected character...

Script php de transfert après upload d'image ne fonctionne pas !

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager