Afficher instantanément une image choisie

Invité · 02/09/2014, 20h49

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 !

**s0h3ck** · 02/09/2014, 22h00

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

Invité · 03/09/2014, 14h12

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 ?

**s0h3ck** · 05/09/2014, 02h56

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!

Afficher instantanément une image choisie

JavaScript

Discussions similaires

Partager

Partager