Prévisualisation d'une image

Signaler
Messages postés
4
Date d'inscription
mardi 28 novembre 2000
Statut
Membre
Dernière intervention
27 avril 2010
-
Messages postés
2
Date d'inscription
jeudi 16 octobre 2008
Statut
Membre
Dernière intervention
5 juillet 2010
-
salut j'amerais faire un formulaire d'enregistrement d'un membre avec enregistrement de photo.comment faire pour prévisualiser la photo avant enregistrement.
merci d'avance

4 réponses

Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
Hello,

Tu te fais un upload de pièce jointe normal (Ou en ajax pour ne pas avoir à cliquer deux fois) en mettant la photo dans un répertoire temporaire dans lequel tu vide les fichiers qui on plus d'une heure par exemple.

Quand l'user valide tu prends la photo du répertoire temporaire et tu la met au bon endroit.


_________________________________
Min iPomme
Messages postés
2
Date d'inscription
jeudi 16 octobre 2008
Statut
Membre
Dernière intervention
5 juillet 2010

Bonjour,
je suis confronté au même problème.

Je souhaite prévisualisé des images uploadées avant de les envoyer.

-> Tonio_35 Pourrais-tu préciser ton idée? J'ai essayé ce que tu proposes, càd de lire le contenu du dossier temporaire mais je n'y arrive pas.
Est-ce que ta solution est possible quand on essai d'uploader plusieures images?

Merci pour ton aide.
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
Volontiers :

Note : Vivement l'HTML 5 qui permet ce genre de chose

Je n'ai pas testé ce que je vais te dire donc j'aimerais bien avoir ton retour la dessus. Et au passage je veux bien t'aider au fur et à mesure :

1. Dans ton formulaire tu crée un bouton d'upload et une div vide d'id par exemple "preview" ;

2. une fois l'image choisi par le client, tu fais une soumission du formulaire en Ajax. Coté php tu récup ton image tu la convertis en base64 et tu la renvois au javascript :
<?php
if($_FILES['monimage']['size'] > 0)
{
  $tmpName  = $_FILES['monimage']['tmp_name'];
$fp      = fopen($tmpName, 'r');
$content = fread($fp, filesize($tmpName));
fclose($fp);
   echo base64_encode($content);
}
?>

Quand tu récup le retour de l'ajax tu as donc une chaine base64 qui contient l'image.

Il suffit maintenant de la mettre en background de ta div "preview" :
background-image:url(data:image/png;base64,");




_________________________________
Min iPomme
Messages postés
2
Date d'inscription
jeudi 16 octobre 2008
Statut
Membre
Dernière intervention
5 juillet 2010

Hello Tonio_35

malheureusement, je ne m'y connais pas dutout en JavaScript.
Je débute en PHP… donc je crois que je vais faire simple et me passer d'une prévisualisation. Je compte de toute façon ajouter une page modification qui permettra de modifier une fiche déjà existante.

Encore merci pour ton aide.