Afficher une image via un bouton

Pour toutes les discussions sur le code client, HTML et CSS
Répondre
Ahmed Abdelmoumen
Messages : 3
Enregistré le : 01 févr. 2023, 17:59

Afficher une image via un bouton

Message par Ahmed Abdelmoumen » 19 mars 2023, 09:42

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

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Afficher une image via un bouton

Message par webmaster » 19 mars 2023, 12:24

Bonjour

J'ai un script de mon livre qui traite cette question
Il est visible ici :
https://www.toutjavascript.com/livre/sc ... l=ajaxFile
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

adapticicle
Messages : 1
Enregistré le : 18 déc. 2023, 08:16

Re: Afficher une image via un bouton

Message par adapticicle » 18 déc. 2023, 08:19

Salut, j'aimerais afficher plusieurs images après l'appui de boutons via une carte d'acquisition. J'ai installé un timer qui scrute les entrées toutes leslittle runmo

annuletyet
Messages : 1
Enregistré le : 23 janv. 2024, 06:00

Re: Afficher une image via un bouton

Message par annuletyet » 23 janv. 2024, 06:04

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Selector</title>
</head>
<body>

<label>Your Photo</label>
<input type="file" name="file" accept=".jpg" onchange="displaySelectedPhoto(event)">
<br>
<img id="photo" src=" " alt="file not found">

<script>
function displaySelectedPhoto(event) {
const fileInput = event.target;
const photoDisplay = document.getElementById("photo");

// Check if a file is selected
if (fileInput.files && fileInput.files[0]) {
const reader = new FileReader();

reader.onload = function (e) {
// Set the src attribute of the img tag to the selected file
photoDisplay.src = e.target.result;
};

// Read the selected file as a data URL
reader.readAsDataURL(fileInput.files[0]);
} else {
// Clear the img tag if no file is selected
photoDisplay.src = " ";
}
}
</script>

</body>
</html>

André
Messages : 1
Enregistré le : 06 févr. 2024, 05:20

Re: Afficher une image via un bouton

Message par André » 06 févr. 2024, 05:27

Bonjour,

As-tu aussi envisagé d'intégrer un mécanisme de gestion des événements pour synchroniser les actions avec les entrées ? D'ailleurs, en parlant d'interaction, j'ai récemment suivi une formation marketing B2B qui mettait en avant l'importance de capter l'attention visuelle pour renforcer l'engagement des utilisateurs. Cela pourrait être pertinent pour ton projet !

Répondre