IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Afficher instantanément une image choisie


Sujet :

JavaScript

  1. #1
    Invité
    Invité(e)
    Par défaut Afficher instantanément une image choisie
    Bonjour,

    je souhaite permettre à mes utilisateurs de voir instantanément les photos qu'ils choisissent sur leur pc sans appuyer un bouton envoyer mais simplement le bouton parcourir.

    je ne sais pas si cela est possible sinon je suis prenant pour toute solution.

    Merci !

  2. #2
    Membre chevronné
    Avatar de s0h3ck
    Inscrit en
    Mars 2013
    Messages
    181
    Détails du profil
    Informations forums :
    Inscription : Mars 2013
    Messages : 181
    Par défaut
    Bonjour,

    C'est possible, par exemple en JavaScript.

    Voici un exemple :

    Le code HTML :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <form>
        <input type="file" onchange="previewFile()"><br>
        <img src="#" height="200" alt="">
      </form>
    </body>
    </html>
    Le code JavaScript :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function previewFile() {
      var preview = document.querySelector('img');
      var file    = document.querySelector('input[type=file]').files[0];
      var reader  = new FileReader();
     
      reader.onloadend = function () {
        preview.src = reader.result;
      }
     
      if (file) {
        reader.readAsDataURL(file);
      } else {
        preview.src = "";
      }
    }

    Le JS Bin (edit) et JS Bin (view).

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    merci pour la réponse si rapide et ta solution marche très bien mais seulement avec qu'une seule image.
    Dans mon cas j'ai quatre(4) images à uploader et à afficher séparément.J'ai même essayé de dupliquer 4 fois la méthode pour chaque img en leur donnant des id mais ça ne fonction pas.

    Comment dois-je procéder ?

  4. #4
    Membre chevronné
    Avatar de s0h3ck
    Inscrit en
    Mars 2013
    Messages
    181
    Détails du profil
    Informations forums :
    Inscription : Mars 2013
    Messages : 181
    Par défaut
    Bonjour,

    Le troisième lien que j'ai posté (selon mes recherches) permet de le faire.
    Je te le réécris: Using readAsDataURL() for image preview.

    Après, il suffit de faire des modifications pour supprimer, ajouter ou encore modifier les dimensions de l'image.
    Amuse-toi!

Discussions similaires

  1. affiche d une image apres segmentation
    Par laiture dans le forum Images
    Réponses: 2
    Dernier message: 23/01/2009, 13h21
  2. Réponses: 1
    Dernier message: 26/01/2008, 17h44
  3. [ETAT] Afficher/Cacher une image
    Par Herman dans le forum IHM
    Réponses: 1
    Dernier message: 04/07/2007, 10h33
  4. Afficher / Remplacer une image par une autre
    Par dolf13 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 06/02/2007, 19h52
  5. n'affiche pas une image arriere plan definis dans une CSS
    Par mikebranque dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 30/06/2006, 15h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo