Method 'POST' / image

Version imprimable

bonjour,

J'aimerai récupérer une image postée sur un formulaire dans un fichier ouvert avec ajax. Cepedant, 'avatar' n'est pas défini dans le fichier ajax. Pouvez vous m'aidez s'il vous plait ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
 
<head>
<title>Test images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="resultats.php"  onsubmit="return valider()" id="formulaire_test" enctype="multipart/form-data">
	<input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
	<input type="file" name="avatar" id="avatar"/>
	<p></br></p>
	<input type="submit" value="valider" />
</form> 
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function valider(){
	$.ajax({
		url: 'ajaximage.php',
		type: 'POST',
		success: function(data){
			if(data=="ok"){
				alert('ca marche');
				var valider=true;
			}
			else{
				var valider=false;
				alert('Veuillez vérifier la taille, l\'extension et le poids de l\'image');
			}
		}
	});
	return valider;
}

Ici, le fichier ajaximage.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
<?php
 
//Vérification de l'extension
$extensions_valides = array( 'png' );
$extension_upload = strtolower(  substr(  strrchr($_FILES['avatar']['name'], '.')  ,1)  );
if ( in_array($extension_upload,$extensions_valides) ){
	$exten=true;
}
else{
	$exten=false;
}
 
//Vérification de la taille
$image_sizes = getimagesize($_FILES['avatar']['tmp_name']);
if ($image_sizes[0] == 50 AND $image_sizes[1] == 50){
	$taille=true;
}
else{
	$taille=false;
}
 
if($taille AND $exten){
	echo "ok";
}
else{
	echo "pas ok";
}
?>

Merci de votre aide

19/09/2014, 08h22
Bovino

Tu mélanges beaucoup de choses là. :aie:

D'abord, tu fais une requête avec la méthode POST, mais tu demandes en PHP le tableau $_FILES.
Ensuite, tu envoies une requête POST, mais tu n'associes aucun paramètre dans la requête, tu ne risques pas de recevoir grand chose côté serveur !
Tu sembles du coup croire qu'il suffut d'envoyer une requête AJAX pour ques les données du formulaire y soient associées, ce n'est pas le cas, loin de là !
Enfin, on ne peut pas récupérer et envoyer une image avec AJAX de cette façon. Un champ file est très particulier et ne se gère pas comme les autres (pour preuve, la récupération côté serveur est elle aussi très spécifique).

Bref, il existe des solutions (utilisation de l'API JavaScript FileReader), mais je te conseille au préalable d'apprendre à utiliser AJAX, comment ça fonctionne, quelles sont les limitations avant de te lancer dans des projets pour lesquels tu n'as pas encore les connaissances requises.
19/09/2014, 08h47
nsr88

Bonjour,

J'ai appris à coder sans aucun professeur. Il est donc normal que j'ai des lacunes. De plus, j'ai du mal à trouver des tutos corrects pour ajax. J'apprend en lisant des bribes de codes vues par ci par là.

Si vous aviez un lien expliquant en détail la méthode post avec ajax, je suis preneur ! En effet, j'aimerai savoir associer une requête formulaire à ajax! Mon $_FILE, fonctionne sur la page resultats.php

Par contre, ce n'est pas sympa de démonter quelqu'un qui cherche à apprendre
19/09/2014, 11h05
devyan

Bonjour,

Pour compléter la réponse de Bovino...

Ce que tu veux faire est relativement complexe, il faut bien identifier les différentes parties et ne pas essayer de tout faire d'un coup (sinon tu risques de ne pas trouver d'où vient le problème quand ça ne fonctionne pas)

Essaye de procéder comme suit :

1- [HTML+PHP] Faire une première version de ton upload de fichier (ton image) avec un submit "classique" de ton formulaire et ton code PHP.
Tu devrais trouver assez facilement des tutos expliquant comment faire un upload en PHP.

2- [PHP] Ajouter en réponse de ta requête upload le fichier reçu.

3- [JavaScript] Transformer ton upload pour qu'il envoie le fichier non plus par submit du formulaire mais par AJAX.
Comme te l'expliquait Bovino, il faut d'abord comprendre comment fonctionne une requête AJAX.
Mais là encore tu devrais pouvoir trouver des tutos expliquant comment faire un upload en AJAX.

4- [JavaScript] Afficher la réponse dans ta page lors de la réponse AJAX.

Bon courage et n'hésite pas à revenir nous voir ;)

Bonjour Yvan,

Tout d'abord merci de votre courtoisie.

Ensuite, j'ai regardé la méthode formulaire "submité" avec ajax mais ça me parait beaucoup plus dur que ce que propose Bovino. Vous avez tous les deux raisons c'est plutôt difficile. J'ai donc rédigé un code en javascript avec sa méthode. Cependant, l'alert signalant que l'image n'est pas en png ne fonctionne pas. Pouvez vous y jeter un coup d'oeil ?
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 window.onload = function() { var width=0; var height=0; var fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', function(e) { var file = fileInput.files[0]; var imageType = /image.png/; if (file.type.match(imageType)) { var reader = new FileReader(); reader.onload = function(e) { var img = new Image(); img.src = reader.result; img.onload = function() { width=this.width; height=this.height; if(width == 50 && height ==50) { alert('Your image is ok.'); } else { alert('Image needs to be 50*50px'); } } } } else { alert('Images needs to be in png.'); } }); }
Merci de votre aide.

19/09/2014, 15h05
devyan

Apparemment tu es parti pour le faire toi même (ce qui est une bonne façon de bien comprendre le mécanisme)
Sinon, il existe également plusieurs plugins jQuery pour faire cela (:google: donne de bons résultats avec les mots clefs "jquery upload ajax")

En ce qui concerne ta question sur la détection, je n'ai pas noté de problème ni avec Firefox, avec Chrome.
19/09/2014, 15h42
nsr88

C'est étrange sur mon chrome ça ne s'affiche pas. Je dois avoir une merde sur mon PC.

Eh oui, je fais quasiment tout moi même et je n'ai pas peur de la difficulté même si il faut savoir rester simple ^_^

Merci de votre temps en tout cas !