JS - Prévisualiser une image avec son upload

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.

8 février 2024 - Wakonda - JavaScript

JS - Prévisualiser une image avec son upload

Rechercher

Tags

Articles récents

Publicité

Suivez-nous

Aidez-nous !