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