Première utilisation
L'API que nous allons découvrir n'est pas utilisable seule. Autrement dit, elle nécessite d'être appelée par diverses technologies permettant son accès et lui fournissant les fichiers qu'elle peut manipuler. Cette API a été conçue de cette manière afin d'éviter que ce ne soit vous, développeurs, qui choisissiez quel fichier lire sur l'ordinateur du client. Si cette sécurité n’existait pas, les conséquences pourraient être désastreuses.
Sachez que l'API File ne vous permet pas, actuellement, d'écrire un fichier stocké sur l'ordinateur d'un client ! Vous ne pourrez que le lire ou bien l'uploader pour le modifier sur un serveur, l'écriture d'un fichier sur l'ordinateur du client est encore en cours d'étude à l'heure où nous écrivons ces lignes.
Afin de pouvoir utiliser notre API, il va nous falloir définir comment les fichiers vont pouvoir être choisis par l'utilisateur. La solution la plus simple pour commencer est l'utilisation d'une balise <input type="file" />, qui va nous permettre d'accéder aux propriétés des fichiers sélectionnés par l'utilisateur. Ces propriétés constituent une partie de l'API File.
Prenons donc une balise toute simple :
<input id="file" type="file" /> |
Et ajoutons-lui un événement :
document.querySelector('#file').onchange = function() {
// Du code…
}; |
Pour accéder au fichier il va nous falloir passer par la propriété files de notre balise <input>. Celle-ci va nous permettre d'accéder à une collection d'objets utilisables de la même manière qu'un tableau, chaque objet représentant un fichier.
Pourquoi une collection d'objets, alors que notre input ne nous permet de sélectionner qu'un seul fichier ?
Eh bien, parce que le HTML5 a ajouté la possibilité de choisir plusieurs fichiers pour un seul et même input! Il vous suffit d'y ajouter l'attribut multiple pour que cela soit autorisé au client :
<input id="file" type="file" multiple /> |
La propriété files est la même pour tous, que la sélection de fichiers soit multiple ou non. Si vous voulez lire le fichier d'un <input> ne gérant qu'un seul fichier, alors vous utiliserez files[0] et non pas file.
Maintenant que ce point est éclairci, essayons d'obtenir le nom du fichier sélectionné grâce à la propriété name contenue dans chaque objet de type File :
document.querySelector('#file').onchange = function() {
alert(this.files[0].name);
}; |
Alors, certes, l'utilité est vraiment moindre, mais vous allez vite découvrir de nombreuses possibilités d'utilisation au cours des paragraphes suivants. Ici, nous allons tâcher de vous faire découvrir l'API File, nous aurons donc beaucoup de théorie, mais la mise en pratique viendra après.
Créé avec HelpNDoc Personal Edition: Créer des sites web d'aide facilement