HTML - Afficher l'image après avoir sélectionné le nom de fichier

Question

J'ai un formulaire qui me permet de

naviguer et sélectionner un fichier.

Ce que je veux faire, c'est afficher cette image immédiatement après avoir sélectionné l'image. Et cela se fait avant que le bouton "envoyer" du formulaire ne soit pressé, donc l'image réside presque certainement côté client. Est-ce possible ?

Answer 1

Voici:

HTML

    JS Bin

      article,
      aside,
      figure,
      footer,
      header,
      hgroup,
      menu,
      nav,
      section {
        display: block;
      }

Script:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#blah').attr('src', e.target.result).width(150).height(200);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

Démonstration en direct

Answer 2

Vous pouvez y parvenir avec le code suivant :

$("input").change(function(e) {

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
             img.src = reader.result;
        }
        reader.readAsDataURL(file);
        $("input").after(img);
    }
});

Demo: http://jsfiddle.net/ugPDx/

Answer 3

Ceci peut être fait en utilisant HTML5, mais cela ne fonctionnera que dans les navigateurs qui le prennent en charge. Voici un exemple.

Gardez à l'esprit que vous aurez besoin d'une méthode alternative pour les navigateurs qui ne prennent pas en charge cela. J'ai eu beaucoup de succès avec ce plugin, qui prend une grande partie du travail en charge.