HTML 5 fournit une API pour lire les fichiers depuis le bureau directement dans votre navigateur. La classe FileReader permet de lire d'obtenir l'image et des informations comme le nom du fichier et la taille du fichier. Cette objet Javascript est manipulable via l'API Javascript. Nous allons dans ce tutoriel nous limité à l'affichage de ces données et ajouter l'image en background de la zone où l'on dépose l'image.
Un petit exemple est souvent plus efficace long discours.
Déposer une image de votre bureau dans la zone ci-dessous via un Glisser / Déposer
Le code HTML de cette exemple est simple : il suffit de définir une zone qui va contenir notre image (holder) et une zone qui va afficher les informations complémentaires (infos).
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset=utf-8 />
<title>HTML5 Demo : File API</title>
<style>
#holder {
border: 5px dashed #cccccc;
width: 200px; height: 200px;
margin: 20px auto;
}
#holder.hover { border: 5px dashed #333333; }
</style>
</head>
<body>
<section id="wrapper">
<header>
<h1>File API</h1>
</header>
<article>
<div id="holder"></div>
<p>Déposer une image de votre bureau dans la zone</p>
<p id="infos"></p>
</article>
</section>
</body>
</html>
Tout le reste se basent sur du javascript. Dans notre exemple, nous n'avons pas besoin de bibliothèques tierces comme jQuery ou Mootools, Javascript se suffit à lui-même. Les premières lignes de javascripts servent uniquement à rendre plus visuels le drag and drop en appliquant une classe CSS aux survols.
var holder = document.getElementById('holder');
var infos = document.getElementById('infos');
holder.ondragover = function () {
this.className = 'hover';
return false;
};
holder.ondragend = function () {
this.className = '';
return false;
};
L'objet DataTransfer contient les données qui sont glissées lors d'une opération de glisser-déposer. Il peut contenir un ou plusieurs éléments de données. En l’occurrence, nous ne tenons compte que de la première image.
L'objet reader de classe FileReader possède un événement onload qui sera exécuté au chargement du fichier. Nous ajoutons uniquement une image de background à l'élément conteneur lors du chargement.
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
var file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = function (event) {
holder.style.background = 'url(' + event.target.result + ') no-repeat center';
};
reader.readAsDataURL(file);
var info = document.createElement("span");
info.innerHTML = file.name + ": " + file.size + " bytes ";
infos.appendChild(info);
return false;
};
Cette exemple ne sert pas à grand chose mais on peu très bien imaginer coupler cette exemple à un formulaire upload, ou mieux encore un outil basé sur canvas pour retailler les images dans le navigateurs avant de les uploader vers le serveurs. La suite au prochain épisode.
Jeu de briques
Snake
Pacman
Bubble