Archives de
Tag: html5

Création d’une miniature avec HTML5

Création d’une miniature avec HTML5

Commentaires 3 commentaires

En trainant sur le net j’ai trouvé un petit tuto qui explique comment faire la miniature d’une image en HTML5 sans uploader le fichier. L’image est afficher a coté du champ input.

La première étape et de créer un formulaire avec un champ input de type file et une balise output pour afficher la miniature..

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML5 File Reader</title>
  </head>
  <body>
    <input type="file" id="files" />
    <output id="out"></output>
    <script>
    </script>
    </body>
</html>

Viens ensuite la partie javascript. Avant toute chose, Il faut vérifié que le navigateur supporte l’API FileReader.

if (window.FileReader) {
  function handleFileSelect(evt) {
} else {
  alert('Ce navigateur ne supporte pas FileReader');
}

Une fois cela fait un event listener est ajouté afin de mettre à jour la miniature lors de la sélection d’une nouvelle image.

document.getElementById('files').addEventListener('change', handleFileSelect, false);

Pour finir nous construisons la miniature grâce a l’image que nous récupérons par l’API FileReader.

function handleFileSelect(evt) {
  var files = evt.target.files;
  var f = files[0];
  var reader = new FileReader();

  reader.onload = (function(theFile) {
    return function(e) {
      document.getElementById('out').innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="50"/>'].join('');
    };
  })(f);

  reader.readAsDataURL(f);
}

Le fichier final est le suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML5 File Reader</title>
  </head>
  <body>
    <input type="file" id="files" />
    <output id="out"></output>
    <script>
      if (window.FileReader) {
        function handleFileSelect(evt) {
          var files = evt.target.files;
          var f = files[0];
          var reader = new FileReader();

          reader.onload = (function(theFile) {
            return function(e) {
              document.getElementById('out').innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="50"/>'].join('');
            };
          })(f);

          reader.readAsDataURL(f);
        }
      } else {
        alert('Ce navigateur ne supporte pas FileReader');
      }
      document.getElementById('files').addEventListener('change', handleFileSelect, false);
    </script>
  </body>
</html>

 

Pour le voir en action c’est par ici.