Archives de
Étiquette : FileReader

Création d’une miniature avec HTML5

Création d’une miniature avec HTML5

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

Viens ensuite la partie javascript. Avant toute chose, Il faut vérifié que le navigateur supporte l’API 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.

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

Le fichier final est le suivant :

 

Pour le voir en action c’est par ici.