web-dev-qa-db-fra.com

HTML - Image affichée après la sélection du nom de fichier

Duplicate possible:
prévisualiser une image avant de la télécharger

J'ai un formulaire qui me permet avec

<input type="file" name="filename" accept="image/gif, image/jpeg, image/png">

pour parcourir et sélectionner un fichier.

Ce que je veux faire, c'est afficher cette image immédiatement après sa sélection. Et ceci avant que le bouton "soumettre" du formulaire ne soit appuyé, l'image réside presque certainement du côté client. Cela peut-il être fait?

htmlfile-upload
138
Edward Hasted

Voici:

HTML

<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <input type='file' onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
</body>
</html>

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émo en direct

266
ygssoni

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);
    }
});

Démo: http://jsfiddle.net/ugPDx/

28
Xavier

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

N'oubliez pas que vous aurez besoin d'une méthode alternative pour les navigateurs qui ne le supportent pas. J'ai eu beaucoup de succès avec ce plugin , qui vous enlève beaucoup de travail.

3
Kelvin