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>
-
Glenn81Huff
- Messages : 1
- Enregistré le : 05 nov. 2025, 11:00
Re: Afficher une image via un bouton
Salut à tous, super intéressante cette discussion, j’avais envie d’y participer ! En parlant de plateformes modernes, je suis récemment tombé sur le site https://fr-bassbet.com/ , une vraie découverte pour les passionnés de jeux d’argent et de sport. On y trouve des slots, de la roulette, du blackjack et même des paris e-sport. Du coup, je voulais demander aux gens aussi curieux et avisés que vous : avez-vous déjà essayé de jouer sur des plateformes de ce genre en ligne ?
Re: Afficher une image via un bouton
Pour faire ça, il faut utiliser un mécanisme qui écoute la sélection du fichier et met à jour l’image affichée avec ce fichier. En pratique, tu relies le bouton “Sélectionner votre photo” à la balise <img> via un script qui prend le fichier choisi et l’affiche. C’est exactement ce que font tous les tutos “aperçu image avant upload”.
Nos cendriers offrent des designs variés et originaux, avec de nombreuses couleurs, formes et styles, afin que chacun puisse trouver celui qui correspond à sa personnalité, ses passions ou sa décoration.
-
emymontrose26
- Messages : 1
- Enregistré le : 12 déc. 2025, 18:46
- Contact :
Re: Afficher une image via un bouton
Il faut ajouter un peu de JavaScript (FileReader) pour lire le fichier sélectionné et mettre son contenu comme src de la balise <img>.
Nos cendriers offrent des designs variés et originaux, avec de nombreuses couleurs, formes et styles, afin que chacun puisse trouver celui qui correspond à sa personnalité, ses passions ou sa décoration.
-
oceanenavarro25
- Messages : 2
- Enregistré le : 20 déc. 2025, 08:50
Re: Afficher une image via un bouton
Tu peux utiliser JavaScript : quand l’utilisateur choisit un fichier, mets img.src = URL.createObjectURL(file) pour l’afficher
-
aydenlambert31
- Messages : 1
- Enregistré le : 23 déc. 2025, 15:52
- Contact :
Re: Afficher une image via un bouton
ce n’est pas possible avec du HTML seul. Le navigateur ne permet pas de relier directement un fichier choisi à une image sans passer par du JavaScript, pour des raisons de sécurité.
Donc soit tu acceptes un peu de JavaScript, soit l’image ne pourra s’afficher qu’après envoi vers un serveur.
Donc soit tu acceptes un peu de JavaScript, soit l’image ne pourra s’afficher qu’après envoi vers un serveur.
Fun and educational telescopes for young explorers.