Forums Tout JavaScript

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

Bonjour

J'ai un script de mon livre qui traite cette question
Il est visible ici :
https://www.toutjavascript.com/livre/sc ... l=ajaxFile

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

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

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.

Forums Tout JavaScript

Afficher une image via un bouton

Afficher une image via un bouton

Re: Afficher une image via un bouton

Re: Afficher une image via un bouton

Re: Afficher une image via un bouton

Re: Afficher une image via un bouton