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
Salut, ouais ton HTML est bon, il te manque juste un p’tit bout de JS pour que l’image s’affiche. Le script posté juste au-dessus marche super bien, je l’ai déjà utilisé. Tu copies la fonction displaySelectedPhoto, tu la colles dans un <script>, puis tu ajoutes onchange="displaySelectedPhoto(event)" à ton input, et ça roule. Rien de plus, c’est vraiment simple une fois que t’as compris le truc.
Au fait, si tu cherches à optimiser ta salle de bain ou ta cuisine, un porte-serviette qui se collent au mur avec un adhésif peut être une super option pratique et esthétique. Tu peux aussi découvrir plein d’autres modèles sur ce site.
Au fait, si tu cherches à optimiser ta salle de bain ou ta cuisine, un porte-serviette qui se collent au mur avec un adhésif peut être une super option pratique et esthétique. Tu peux aussi découvrir plein d’autres modèles sur ce site.