[AJAX] Rafraichir un div après validation

Version imprimable

10/04/2008, 16h08
HeadQuaker

[AJAX] Rafraichir un div après validation

Bonjour tout le monde,

Voilà mon problème :
J'ai une page dans laquelle une image uploadée par un user s'affiche.
Cette page contient un formulaire pour modifier la taille de l'image.

Je souhaiterai que la nouvelle image modifiée s'affiche à la place de l'autre après validation du formulaire avec la nouvelle taille...ou bien mieux lorsque l'utilisateur saisie la taille dans le formulaire, que celle ci soit modifiée en temps réel.

Est ce possible?
Comment pourrais-je faire ca?
J'utilise du PHP actuellement.

Up! Please Help, Merci d'avance!

voici le code de ce formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
echo ('<div class="adjust">');
echo ('<form name="sharp_croping" enctype="multipart/form-data" method="post" action="resize_image.php">');
echo ('Largeur : <input type="text" name="cropWidth"><br />');
echo ('Hauteur : <input type="text" name="cropHeight"><br />');
echo ('<input type="hidden" class="hidden" name="imageWidth" id="imageWidth" value="'.$_POST['imageWidth'].'" />');
echo ('<input type="hidden" class="hidden" name="imageHeight" id="imageHeight" value="'.$_POST['imageHeight'].'" />');
echo ('<input type="hidden" class="hidden" name="croptype" id="croptype" value="'.$croptype.'" />');
echo ('<input type="hidden" class="hidden" name="imageFileName" id="imageFileName" value="'.$_POST['imageFileName'].'" />');
echo ('<input type="hidden" class="hidden" name="cropX" id="cropX" value="0" />');
echo ('<input type="hidden" class="hidden" name="cropY" id="cropY" value="0" />');
echo ('<input type="hidden" name="choicetype" value="image/pjpeg" >');
echo ('<input type="submit" value="Envoyer" onClick="history.go(0)">');
echo ('</form>');
echo ('</div>');

Voici pour l'image :

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
	// DEFINE VARIABLES
	$imageWidth			 = $_POST['imageWidth'];
	$imageHeight		 = $_POST['imageHeight'];
	$imageFileName		 = $_POST['imageFileName'];
	$cropX				 = $_POST['cropX'];
	$cropY				 = $_POST['cropY'];
	$cropWidth			 = $_POST['cropWidth'];
	$cropHeight			 = $_POST['cropHeight'];
 
	if($cropWidth == 0) { $cropWidth = $imageWidth; }
	if($cropHeight == 0) { $cropHeight = $imageHeight; }
 
	$sourceFile			 = "../files/working/uploads/". $imageFileName;
	$destinationFile = "../files/working/cropped/" . $imageFileName;
 
	if(file_exists($destinationFile)) { chmod($destinationFile, 0777); unlink($destinationFile); }
 
	// CHECK TO SEE IF WE NEED TO CROP
	if($imageWidth != $cropWidth || $imageHeight != $cropHeight) {
		$canvas = imagecreatetruecolor($cropWidth,$cropHeight);
		$piece = imagecreatefromjpeg($sourceFile);
		imagecopy($canvas,$piece,0,0,$cropX,$cropY,$cropWidth,$cropHeight);
		imagejpeg($canvas,$destinationFile,90);
		imagedestroy($canvas);
		imagedestroy($piece);
		chmod($destinationFile, 0777);
 
	} else {
		// CROP WAS SKIPPED -- MOVE TO CROPPED FOLDER ANYWAY	
		copy($sourceFile,$destinationFile);
		chmod($destinationFile, 0777);
	}

$croptype : permet de définir le type de crop (que l'utilisateur peut choisir avant d'uploader l'image) appliquer à l'image.
J'ai 2 types de crop en fait :
- Normal (l'utilisateur modifie la taille à l'aide d'un slider)
- Sharp (l'utilisateur peut définir une taille précise au pixel près) -> c'est là qu'intervient mon formulaire "adjust"

11/04/2008, 10h42
funkyy

Salut

Je débute en AJAX, donc prend garde à ce que je vais dire lol. Avec la tonne de truc qu'on peut faire en AJAX, ton truc est forcément possible. Seulement je ne sais pas si tu dois faire un traitement de ton image en PHP, je pense qu'il aurait plus fallu la traiter en JavaScript. Après, c'est peut-être possible, mais je ne sais pas si tu peux transmettre un objet de type image entre le fichier PHP et Javascript. D'habitude, dans le fichier AJAX on appelle le fichier PHP, ce dernier fait la requête et renvoi la réponse par l'intermédiaire d'un echo. Il y a peut-être une méthode pour renvoyer un objet image 8O de PHP à JS (à moins qu'un echo le fasse? 8O )

Donc ... :google: lol
11/04/2008, 10h47
HeadQuaker

oui google est mon ami j'ai déjà cherché... mais je vais quand même tenter autre chose.
11/04/2008, 10h54
funkyy

Tu maîtrise JavaScript ?
11/04/2008, 11h02
HeadQuaker

on a dire que je suis moyen :p
11/04/2008, 11h03
DoubleU

Tu genères ta nouvelle image sur le serveur, tu retourne l'adresse de cette image, et tu modifies le src de ton tag <img> dans ta page via javascript
11/04/2008, 14h10
HeadQuaker

j'ai pas encore tester j'ai décidé de reporter à plus tard cette fonctionnalité....j'ai d'autres priorités. merci quand même