Mise en pratique API file
L'étude de l'API File est maintenant terminée. Il est probable que vous vous demandiez encore ce que nous lui trouvons d'exceptionnel... Eh bien, il est vrai que, si nous l'utilisons uniquement avec des balises <input>, alors nous sommes assez limités dans son utilisation. Ce chapitre couvre la base de l'API File, son utilisation seule, mais il faut savoir que le principal intérêt de cette API réside en fait dans son utilisation avec d'autres ressources. Ainsi, un petit plus loin dans ce chapitre, nous allons étudier comment l'utiliser conjointement avec l'objet XMLHttpRequest afin d'effectuer des uploads ; nous verrons aussi, dans un chapitre ultérieur, comment s'en servir efficacement avec le Drag & Drop. Bref, ne vous en faites pas, nous n'en avons pas encore terminé avec cette fameuse API.
Nous allons ici faire une mise en pratique plutôt sympathique de cette API. Le scénario est le suivant : vous souhaitez créer un site d'hébergement d'images interactif. Le principe est simple, l'utilisateur sélectionne les images qu'il souhaite uploader, elles sont alors affichées en prévisualisation sur la page et l'utilisateur n'a plus qu'à cliquer sur le bouton d'upload une fois qu'il aura vérifié qu'il a bien sélectionné les bonnes images.
Notre objectif, ici, est de créer la partie concernant la sélection et la prévisualisation des images, l'upload ne nous intéresse pas. Afin d'obtenir le résultat escompté, nous allons devoir utiliser l'API File, qui va nous permettre de lire le contenu des fichiers avant même d'effectuer un quelconque upload.
Commençons par construire la page HTML qui va accueillir notre script :
<input id="file" type="file" multiple />
<div id="prev"></div> |
Il n'y a pas besoin de plus, nous avons notre balise <input> pour sélectionner les fichiers (avec l'attribut multiple afin de permettre la sélection de plusieurs fichiers) ainsi qu'une balise <div> pour y afficher les images à uploader.
Il nous faut maintenant passer au Javascript. Commençons par mettre en place la structure principale de notre script :
(function() {
var allowedTypes = ['png', 'jpg', 'jpeg', 'gif'], fileInput = document.querySelector('#file'), prev = document.querySelector('#prev');
fileInput.onchange = function() {
// Analyse des fichiers et création des prévisualisations
};
})(); |
Ce code déclare les variables et les événements nécessaires. Vous constaterez qu'il existe une variableallowedTypes, celle-ci contient un tableau listant les extensions d'images dont nous autorisons l'upload. L'analyse des fichiers peut maintenant commencer. Sachant que nous avons autorisé la sélection multiple de fichiers, nous allons devoir utiliser une boucle afin de parcourir les fichiers sélectionnés. Il nous faudra aussi vérifier quels sont les fichiers à autoriser :
fileInput.onchange = function() {
var files = this.files, filesLen = files.length, imgType;
for (var i = 0 ; i < filesLen ; i++) {
imgType = files[i].name.split('.'); imgType = imgType[imgType.length - 1].toLowerCase(); // On utilise toLowerCase() pour éviter les extensions en majuscules
if(allowedTypes.indexOf(imgType) != -1) {
// Le fichier est bien une image supportée, il ne reste plus qu'à l'afficher
}
}
}; |
Les fichiers sont parcourus puis analysés. Sur les lignes 9 et 10 nous faisons l'extraction de l'extension du fichier en faisant un découpage de la chaîne de caractères grâce à un split('.') et nous récupérons le dernier élément du tableau après l'avoir passé en caractères minuscules. Une fois l'extension obtenue, nous vérifions sa présence dans le tableau des extensions autorisées (ligne 12).
Il nous faut maintenant afficher l'image, comment allons-nous nous y prendre ? L'affichage d'une image, en HTML, se fait grâce à la balise <img>, or celle-ci n'accepte qu'une URL en guise de valeur pour son attribut src. Nous pourrions lui fournir l'adresse du fichier à afficher, mais nous ne connaissons que son nom, pas son chemin. La réponse se trouve dans les DataURL ! Rappelez-vous, nous avions bien précisé que les DataURL permettaient de stocker des données dans une URL, c’est exactement ce qu'il nous faut ! Tout d'abord, avant de commencer cet affichage, plaçons un appel vers une fonction createThumbnail() à la 14e ligne de notre précédent code :
if(allowedTypes.indexOf(imgType) != -1) { createThumbnail(files[i]); } |
Nous pouvons maintenant passer à la création de notre fonction createThumbnail() :
function createThumbnail(file) {
var reader = new FileReader();
reader.onload = function() {
// Affichage de l'image
};
reader.readAsDataURL(file);
} |
Comme vous pouvez le constater, il n'y a rien de compliqué là-dedans, nous instancions un objet FileReader, lui attribuons un événement load, puis lançons la lecture du fichier pour une DataURL. Une fois la lecture terminée, l'événement load se déclenche si tout s'est terminé correctement, il ne nous reste donc plus qu'à afficher l'image :
reader.onload = function() {
var imgElement = document.createElement('img'); imgElement.style.maxWidth = '150px'; imgElement.style.maxHeight = '150px'; imgElement.src = this.result; prev.appendChild(imgElement);
}; |
Et voilà, notre script est terminé !
<input id="file" type="file" multiple />
<div id="prev"></div> |
(function() {
function createThumbnail(file) {
var reader = new FileReader();
reader.onload = function() {
var imgElement = document.createElement('img'); imgElement.style.maxWidth = '150px'; imgElement.style.maxHeight = '150px'; imgElement.src = this.result; prev.appendChild(imgElement);
};
reader.readAsDataURL(file);
}
var allowedTypes = ['png', 'jpg', 'jpeg', 'gif'], fileInput = document.querySelector('#file'), prev = document.querySelector('#prev');
fileInput.onchange = function() {
var files = this.files, filesLen = files.length, imgType;
for (var i = 0 ; i < filesLen ; i++) {
imgType = files[i].name.split('.'); imgType = imgType[imgType.length - 1];
if(allowedTypes.indexOf(imgType) != -1) { createThumbnail(files[i]); }
}
};
})(); |
Créé avec HelpNDoc Personal Edition: Créer des livres électroniques EPub facilement