Commentaire: Aujourd'hui, je partagerai avec vous une application simple pour démontrer la méthode d'utilisation de FileReader. FileReader est une API de fonctionnement de fichiers fournie dans HTML5. Les amis qui en ont besoin peuvent en savoir plus.
Dans les articles précédents, j'ai partagé plusieurs exemples HTML5 avec vous, à savoir la démonstration de la fonction de glisser-déposer, la démonstration du contenu de la page modifiable et la démonstration de la fonction de stockage locale. Aujourd'hui, je vais partager avec vous une application simple pour démontrer la méthode d'utilisation de FileReader, une API de fonctionnement de fichiers fournie dans HTML5.Lorsque vous regardez les exemples HTML 5 que j'ai écrits plus tôt, je pense à créer un exemple simple mais applicable pour percer ces nouvelles fonctionnalités HTML5 d'une manière encore plus bizarre. Mon objectif n'est pas de montrer simplement ces API HTML 5, mais d'utiliser des exemples pour dire aux développeurs comment mettre en œuvre vraiment ces API d'une manière pratique et innovante.
Dans HTML5, l'accès au système de fichiers local à partir d'une page Web devient très simple, c'est-à-dire en utilisant l'API de fichier. Cette spécification de fichier fournit une API pour représenter des objets de fichier dans une application Web. Vous pouvez les sélectionner et accéder à leurs informations via la programmation. Cette API de fichier comprend:
Une séquence FileList représente un tableau de fichiers individuels sélectionnés dans le système local. L'interface utilisateur utilisée pour sélectionner un fichier peut être implémentée via l'appel <entrée type = fichier>.
Une interface blob qui représente les données binaires d'origine, à travers lesquelles vous pouvez accéder aux données d'octets à l'intérieur.
Une interface de fichier contient des informations d'attribut en lecture seule d'un fichier, tels que le nom de fichier, le type de fichier et l'adresse d'accès aux données du fichier.
Une interface FileReader qui fournit une méthode pour lire un fichier et un modèle d'événement qui obtient le résultat d'un fichier lu.
Une interface FileError et un objet FileException qui définit les conditions de génération d'erreur dans cette spécification.
Comment utiliser cet exemple: dans cet exemple, j'ai donné un artboard où vous pouvez faire glisser et déposer une image dans le système de fichiers local, ou vous pouvez également utiliser la zone de sélection de fichiers pour sélectionner l'image. Dans l'exemple, veuillez sélectionner uniquement le fichier image, je n'ai pas ajouté de filtrage de fichiers et de vérification du type de fichier. N'oubliez pas qu'aucun navigateur n'implémente entièrement HTML5. Cet exemple doit être exécuté sur un navigateur qui prend en charge HTML5, comme Firefox 3.5 ou plus.
La méthode principale pour implémenter l'API de fichier est très simple, tout comme ce qui suit:
fonction ImageSeselected (myFiles) {
pour (var i = 0, f; f = myfiles [i]; i ++) {
var imageReader = new FileReader ();
ImageReader.onLoad = (fonction (afile) {
Fonction de retour (e) {
var span = document.CreateElement ('span');
span.innerhtml = ['<img src = "', e.target.result, '" />']. join ();
document.getElementById ('thumbs') .InsertBefore (Span, null);
};
}) (f);
ImageReader.readasdataurl (f);
}
}
fonction dropit (e) {
IMAMESSELECT (E.Datatransfer.Files);
e.stoppropagation ();
E.PreventDefault ();
}
J'ai choisi de placer mon événement Ondrop sur <TD>:
<TD Align = Left Height = 105 ″ ONDRAGENTER = RETOUR FALSE ONDRAGOVER = RETOUR FAUX ONDROP = DUPIT (EVENT)>
<id de sortie = thumbs> </putput>
</td>
Dans cet exemple, je fais glisser simplement le fichier local dans le plan d'art. Cependant, je pense que cela peut vous montrer les capacités simples mais puissantes de l'API Fichier