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 ...