Archives de
Category: Code

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.

Mise à jour d’un projet composer

Mise à jour d’un projet composer

Commentaires 0 Commentaire

Peu de temps après la création de mon projet silex Symfony2 a été mis à jour. J’ai donc fait ma première mise à jour de mon projet avec composer.

Pour cela rien de plus simple, une petite commande et c’est bon.

Et voilà un projet à jour !

Installer Silex avec Composer

Installer Silex avec Composer

Commentaires 0 Commentaire

La première étape est bien entendu l’installation de composer. Rien de plus simple. Lancez un terminal puis allez dans le répertoire de votre projet et lancez

curl -s http://getcomposer.org/installer | php

Ensuite créez le fichier composer.json avec pour contenu:

{
    "require": {
        "silex/silex": "1.0.*"
    },
    "minimum-stability": "dev"
}

Ce fichier est utiliser pas composer afin de savoir quelles dependances télécharger pour le projet. Dans notre cas nous demandons Silex en version 1.0.*.

Afin d’installer silex lancez la commande suivante :

php composer.phar install

Un répertoire vendor avec les librairies utilisé par Silex vient d’être créé.

Afin d’avoir une page pour notre site créez un répertoire web puis un fichier index.php avec pour contenu :

<?php

require_once __DIR__.'/../vendor/autoload.php';

$app = new Silex\Application();

$app->get('/', function() {
    return 'Hello world!';
});

$app->run();

Une fois que vous accedez a votre cette page vous devriez voir « Hello world! » dans votre navigateur.