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.