IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[AJAX] Rafraichir un div après validation


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Inscrit en
    Avril 2008
    Messages
    35
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 35
    Points : 16
    Points
    16
    Par défaut [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.

  2. #2
    Membre à l'essai
    Inscrit en
    Avril 2008
    Messages
    35
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 35
    Points : 16
    Points
    16
    Par défaut
    Up! Please Help, Merci d'avance!

    voici le code de ce formulaire :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
    	// 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"

  3. #3
    Membre à l'essai
    Inscrit en
    Avril 2008
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 17
    Points : 16
    Points
    16
    Par défaut
    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 de PHP à JS (à moins qu'un echo le fasse? )

    Donc ... lol

  4. #4
    Membre à l'essai
    Inscrit en
    Avril 2008
    Messages
    35
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 35
    Points : 16
    Points
    16
    Par défaut
    oui google est mon ami j'ai déjà cherché... mais je vais quand même tenter autre chose.

  5. #5
    Membre à l'essai
    Inscrit en
    Avril 2008
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 17
    Points : 16
    Points
    16
    Par défaut
    Tu maîtrise JavaScript ?

  6. #6
    Membre à l'essai
    Inscrit en
    Avril 2008
    Messages
    35
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 35
    Points : 16
    Points
    16
    Par défaut
    on a dire que je suis moyen :p

  7. #7
    Membre expérimenté Avatar de DoubleU
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 106
    Points : 1 388
    Points
    1 388
    Par défaut
    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

  8. #8
    Membre à l'essai
    Inscrit en
    Avril 2008
    Messages
    35
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 35
    Points : 16
    Points
    16
    Par défaut
    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

Discussions similaires

  1. [1.x] Rafraichir une div après une requête ajax
    Par phpestpuissant dans le forum Symfony
    Réponses: 2
    Dernier message: 02/10/2012, 09h25
  2. [AJAX] Rafraichir un DIV apres insertion dans BDD
    Par Equinoxe5 dans le forum AJAX
    Réponses: 5
    Dernier message: 04/12/2009, 09h58
  3. rafraichir une div après requete post
    Par gtraxx dans le forum jQuery
    Réponses: 6
    Dernier message: 17/10/2009, 10h31
  4. Réponses: 1
    Dernier message: 09/03/2009, 18h56
  5. [AJAX] rafraichir une div !
    Par omantherasta dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 24/12/2006, 17h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo