Discussion :

[Ahmed_1966]

Bonjour à tous
je voudrais ajouter à ma page contact.html un bouton "Sélectionner votre photo"
et une fois la photo sélectionnée.
il l'affiche dans une balise img en dessous du bouton par exemple.
mais je n'arrive toujours pas à le faire.

j'ai écrit cela dans le fichier html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<label>Votre Photo</label>
                    <input type="file" name="file" accept=".jpg"  ><br> 
                    <img id="photo"src="" alt="fichier non trouvé" >

mais comment lier le fichier choisi à l'image
Merci pour votre aide

[mathieu]

regardez les exemples de cette page, il y a plusieurs exemples de code javascript qui utilise le fichier sélectionné :
https://developer.mozilla.org/fr/doc...r_lutilisateur

[chatGPT]

Pour ajouter un bouton "Sélectionner votre photo" qui permet aux utilisateurs de choisir une image et de l'afficher dans une balise img, vous pouvez utiliser l'élément input de type file en HTML. Voici comment vous pouvez le faire:

Ajoutez un bouton "Sélectionner votre photo" à votre page contact.html en utilisant l'élément input de type file. Voici un exemple:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<form>
   <label for="photo">Sélectionner votre photo:</label>
   <input type="file" id="photo" name="photo">
   <br><br>
   <input type="submit" value="Envoyer">
</form>

Ajoutez une balise img en dessous du bouton. Par exemple:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id="image" src="" alt="Votre photo">

Utilisez JavaScript pour récupérer la photo sélectionnée par l'utilisateur et l'afficher dans la balise img. Vous pouvez utiliser l'événement onchange pour détecter quand l'utilisateur sélectionne une photo. Voici un exemple:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
   const inputPhoto = document.getElementById('photo');
   const image = document.getElementById('image');
 
   inputPhoto.onchange = function(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
 
      reader.onload = function(e) {
         image.src = e.target.result;
      };
 
      reader.readAsDataURL(file);
   };
</script>

Avec ce code, lorsque l'utilisateur sélectionne une photo en cliquant sur le bouton "Sélectionner votre photo", la photo sera affichée dans la balise img en dessous. Notez que ce code utilise FileReader pour lire le fichier image et convertir son contenu en une URL de données, qui peut être utilisée comme valeur de l'attribut src de la balise img.