Afficher instantanément une image choisie

Version imprimable

02/09/2014, 20h49
Invité

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 !

Bonjour,

C'est possible, par exemple en JavaScript.

Voici un exemple :

Le code HTML :

Code:

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:

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

03/09/2014, 14h12
Invité

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 ?
05/09/2014, 02h56
s0h3ck

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! :D