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
Afficher une image via un bouton
-
Ahmed Abdelmoumen
- Messages : 3
- Enregistré le : 01 févr. 2023, 17:59
Re: Afficher une image via un bouton
Bonjour
J'ai un script de mon livre qui traite cette question
Il est visible ici :
https://www.toutjavascript.com/livre/sc ... l=ajaxFile
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
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
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
<!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>
<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>
Re: Afficher une image via un bouton
Bonjour,
J'apprécie la clarté de votre code HTML et JavaScript pour cette fonctionnalité. La manière dont vous avez utilisé l'événement onchange pour déclencher l'affichage de l'image sélectionnée est bien pensée. C'est comme donner vie à votre page web, d'un simple clic. Et bien sûr, intégrer cette fonctionnalité dans des projets plus vastes, que ce soit pour une galerie d'images ou une application de traitement d'images, serait une progression naturelle vers une expérience digitale plus immersive.
J'apprécie la clarté de votre code HTML et JavaScript pour cette fonctionnalité. La manière dont vous avez utilisé l'événement onchange pour déclencher l'affichage de l'image sélectionnée est bien pensée. C'est comme donner vie à votre page web, d'un simple clic. Et bien sûr, intégrer cette fonctionnalité dans des projets plus vastes, que ce soit pour une galerie d'images ou une application de traitement d'images, serait une progression naturelle vers une expérience digitale plus immersive.