Voici un exemple simple de comment prévisualiser une image avant son téléversement en utilisant du JavaScript pur :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prévisualisation d'image</title>
<style>
#image-preview {
max-width: 200px;
max-height: 200px;
}
</style>
</head>
<body>
<input type="file" id="image-upload" accept="image/*">
<br>
<img id="image-preview" src="#" alt="Prévisualisation">
<script>
document.getElementById('image-upload').addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('image-preview').setAttribute('src', e.target.result);
}
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>Ce fichier HTML fournit un champ d'entrée pour sélectionner un
fichier image (<input type="file">) et une
balise <img> avec l'ID
image-preview où l'image sélectionnée sera
affichée.
Le code JavaScript écoute les changements dans le champ
d'entrée. Lorsqu'un fichier est sélectionné, il crée un objet
FileReader pour lire le contenu du fichier
sélectionné. Une fois que le fichier est lu, l'événement
onload du lecteur est déclenché, et le résultat
(e.target.result) est défini comme la source
(src) de la prévisualisation de l'image.
