HTML5 implémente un exemple d'accès aux compétences du didacticiel files_html5 local

Dans les articles précédents, j'ai partagé avec vous plusieurs exemples HTML5, notamment une démonstration de la fonction glisser-déposer, une démonstration du contenu de la page modifiable et une démonstration de la fonction de stockage local. Aujourd'hui, je vais partager avec vous une application simple pour montrer comment utiliser FileReader, une API d'opération de fichiers fournie en HTML5.

Lorsque vous regardiez l'exemple HTML 5 que j'ai écrit plus tôt, je pensais créer un exemple simple mais applicable pour mettre en pratique ces nouvelles fonctionnalités HTML5 d'une manière plus originale. Mon objectif n'est pas simplement de démontrer ces API HTML 5, mais d'utiliser des exemples pour montrer aux développeurs comment implémenter réellement ces API de manière pratique et innovante.

En HTML5, accéder au système de fichiers local à partir d'une page Web devient très simple, c'est-à-dire en utilisant l'API File. Cette spécification de fichier fournit une API pour représenter les objets fichier dans les applications Web. Vous pouvez les sélectionner et accéder à leurs informations par programme. Cette API File comprend :
Une séquence FileList, représentant un tableau composé de fichiers individuels sélectionnés dans le système local. L'interface utilisateur de sélection de fichiers peut être implémentée en appelant .
Une interface Blob, qui représente des données binaires brutes. Grâce à l'objet Blob, vous pouvez accéder aux données d'octets qu'il contient.
Une interface de fichier, qui stocke les informations d'attribut en lecture seule du fichier, telles que le nom du fichier, le type de fichier et l'adresse d'accès aux données du fichier.
Une interface FileReader, qui fournit des méthodes de lecture d'un fichier et un modèle d'événement pour obtenir les résultats de lecture de fichier.
Une interface FileError et un objet FileException, qui sont utilisés pour définir les conditions d'erreur dans cette spécification.
Comment utiliser cet exemple : dans cet exemple, j'ai donné un plan de travail et vous pouvez y faire glisser une image à partir du système de fichiers local, ou vous pouvez également utiliser la zone de sélection de fichier pour sélectionner une image. Dans l'exemple, veuillez sélectionner uniquement les fichiers image, je n'ai pas ajouté de filtrage de fichiers ni de vérification du type de fichier. Veuillez garder à l'esprit qu'aucun navigateur n'implémente entièrement HTML5. Cet exemple doit être exécuté sur un navigateur prenant en charge HTML5, tel que Firefox 3.5 ou supérieur.

La méthode principale pour implémenter l'API File est très simple, comme ci-dessous :

Copier le code

Le code est le suivant :

function imagesSelected(myFiles) {
for (var i = 0, f; f = myFiles[i]; i) {
var imageReader = new FileReader();
imageReader.onload = (function(aFile) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = [''].join(”); 🎜>document. getElementById('thumbs').insertBefore(span, null);
})(f);
function dropIt(e) {
imagesSelected(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}


Je sélectionne Placer mon événement ondrop sur :

Copier le code

Le code est le suivant : id=”thumbs”> ;

Dans cet exemple, je fais simplement glisser un fichier local dans le plan de travail, mais je pense que cela apparaît vous voyez à quel point l'API File est simple et puissante.