Discussion :

[keitaro_bzh]

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 HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

[NoSmoking]

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

Supprime au moins le premier;

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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]);
}

[keitaro_bzh]

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

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

[NoSmoking]

Si ton �l�ment

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

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

[keitaro_bzh]

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

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

[SpaceFrog]

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<button type=submit

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<input type="button"