Activité-Paranormale


Red devil Information

Publicité

Rechercher

Développement

Apportez vos talents de codeur !

Développer

Citations

Random quotation
L'absinthe apporte l'oubli, mais se fait payer en migraines.
(Oscar Wilde)

Événements - 6 décembre

Event Calendrier

Validation

Valid XHTML 1.0 Transitional Valid CSS!

Crystal ballTour de magie

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



- CC BY 2.5


Publicité