Image preview javascript

Bonjour � tous,

Je viens de cr�er un formulaire de saisie simple en php/html qui permet de saisir les coordonn�es d'une personne.
Pour se faire, j'utilise une classe PHP qui est g�n�r� avec la g�n�ration du formulaire et qui compl�te les valeurs des inputs si j'ai un id et des infos correspondantes, sinon, c'est un blanc.

Jusque la, tout va bien. J'ai voulu rajouter un moyen de transf�rer un avatar. Cela fonctionne �galement si je passe par un champ <input type=file>

Une fois le formulaire OK, je passe � la partie plus compliqu�e pour moi, rendre la page sexy. Et la, besoin du JS. En effet, pour la partie avatar, je veux cacher le champ input moche et avoir un cadre avec une img qui se changera en fonction de l'image s�lectionn�e dans mon input.
J'ai donc trouv� sur le net le moyen de le faire.

Voici le

Code:

---

1 2 3 4 5 6 7 8 9

<div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback text-center"> <img src="<?php echo $monObjet->getValeur('avatar'); ?>" id='output' alt="Avatar" height="120" width="120"> <input type=hidden name=avatar value='<?php echo $monObjet->getValeur('avatar'); ?>'> </div> <div id=image></div> <div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback text-center"> <p><input type=file name="file_avatar" id="file_avatar" class="form-control" accept="image/png, image/jpeg" onchange="previewImage(event);"> <button type=submit class="btn" onclick="document.getElementById('file_avatar').click();" >Modifier</button></p> </div>

---

Voici le code JS

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

function previewImage(file) { var input = file.target; var reader = new FileReader(); reader.readAsDataURL(input.files[0]); reader.onload = function(){ var dataURL = reader.result; var output = document.getElementById('output'); output.src = dataURL; }; reader.readAsDataURL(input.files[0]); }

---

Lorsque je cr�e un nouveau formulaire, cela fonctionne � merveille. J'�tais m�me fier de moi!! :ptdr::ptdr:
Par contre, quand je prends un fiche d�j� enregistr�, si je clique sur le bouton JS, j'ai bien l'explorateur qui s'ouvre, mais quand je s�lectionne le fichier, rien ne se passe.

J'ai affich� le input file pour voir le comportement, et dans le second cas, m�me apr�s s�lection du fichier, le chemin ne s'affiche pas, alors que oui lors de la cr�ation. Je ne comprends pas la diff�rence entre le deux et je reste bloqu� dessus car �a m'agace.

Est-ce que quelqu'un aurait une id�e?

En vous remerciant.

Bonjour,
pourquoi as tu deux fois reader.readAsDataURL(input.files[0]); ?

Supprime au moins le premier;

Code:

---

1 2 3 4 5 6 7 8 9 10 11

function previewImage(file) { var input = file.target; var reader = new FileReader(); // reader.readAsDataURL(input.files[0]); /* A SUPPRIMER */ reader.onload = function(){ var dataURL = reader.result; var output = document.getElementById('output'); output.src = dataURL; }; reader.readAsDataURL(input.files[0]); }

---

Merci pour ta r�ponse. Le doublon surement sur � ma b�tise! :oops::ptdr:

Plus s�rieusement, je viens de le supprimer mais cela ne change rien. Par contre, le fait de bosser sur mon raspberry change le sympt�me. En effet, sur ma VM au bureau, vu la puissance, je ne vois rien, mais avec mon raspberry, beaucoup plus lent, je vois d�sormais l'image s'afficher, mais au bout de quelques secondes, l'affichage se rafra�chit et l'image dispara�t.

J'ai donc regard� pour les autres champs et en effet, quand je modifie un input text standard, quand je charge mon image, ce champ se r�initialise aussi...

Si ton �l�ment

Code:

---

<button type=submit class="btn" onclick="document.getElementById('file_avatar').click();" >Modifier</button></p>

---

est contenu dans un �l�ment <form> alors ta page est soumise donc recharg�e.

Exact, mon bouton fait parti de mon <form>.
Je viens de tester et t'es trop fort!! Merci :D

Du coup, comment je fais pour mettre mon bouton dans mon formulaire? Je suppose que je ne peux fermer mon </form> et le rouvrir apr�s mon bouton. Existe-t-il une solution?

Sinon, il faut que je r�organise tout mon formulaire..:aie::aie:

Code:

---

<button type=submit

---

:nono:

Code:

---

<input type="button"

---

:ccool:

Super!! Le input � la place du button fonctionne nickel :)

Par contre, deux questions du coup:
- La diff�rence entre le input et le button? Tant que je valide pas par un input/submit pour un form, pas d'action sur la page. Alors que si j'ai un button, alors, action sur la page automatiquement? C'est bien �a?
- Du coup, en y r�fl�chissant cette nuit, est-ce que si j'avais fait un preventdefault sur l'action de mon bouton et enchain� le script JS derri�re, cela aurait fonctionn�?

En tout cas, merci � vous, je vais pouvoir passer � autre chose :king::king:

Tout ce qui est de type sumbit, que ce soit un bouton ou un input a pour role de soumettre le form lors du click ...