L'interface de fichier HTML5 utilise des fichiers pour télécharger sur la page Web

L'interface de fichier fournit des informations liées aux fichiers et exécute JavaScript sur la page Web pour accéder au contenu du fichier.

L'objet de fichier provient de l'objet FileList renvoyé par l'utilisateur pour sélectionner le fichier avec la balise d'entrée, dans l'objet DataTransfer de l'opération de glisser-déposer. L'objet de fichier est un blob spécial qui peut être utilisé dans n'importe quel contexte qui peut être utilisé dans Blob.

Pour utiliser des fichiers sur la page Web, les objets qui doivent généralement être impliqués sont: objet fichier, objet FileList, objet FileReader.

FileList provient de deux endroits, la propriété des fichiers de l'élément d'entrée et de l'API de glisser-déposer (lorsque le fichier est glissé, l'événement.datatransfer.files est un objet FileList)

 <IND ID = FileItem Type = File> var FileList = Document.getElementById ('FileItem').

Longueur: Cet attribut ne renvoie que la longueur de l'objet de fichier contenu dans l'objet FileList.

Élément (index): Obtenez l'objet de fichier spécifié dans la position désignée dans l'objet FileList. Il peut être informé sous la forme de plusieurs indices de tableau

Chacun des objets FileList est l'objet de fichier. L'objet de fichier est un blob spécial.

1.Lastmodify: Le moment où le fichier est révisé, cette fois, les millisecondes sont passées à 0: 0: 00 le 1er janvier 1970. C'est un attribut lisible

2.Name: le nom du fichier du fichier référencé par l'objet de fichier, qui est un attribut lisible

3.Type: le type de fichier du fichier référencé par l'objet de fichier est le type de mine, qui est un attribut lisible.

4.Size: la taille du fichier du fichier référencé par l'objet de fichier, cet attribut One-Read.

Il n'y a aucun moyen de définir l'objet de fichier seul, mais il a un moyen d'hériter de l'objet blob.

L'objet FileReader permet aux applications Web de lire des fichiers sur l'ordinateur utilisateur de manière asynchrone.

FileReader () est un constructeur qui peut créer un nouvel objet FileReader à travers lui.

var fileReader = new fileReader ();

1.Error: renvoie l'erreur qui se produit pendant le processus de lecture.

2.Result: renvoie le contenu du fichier et le type est digne de taper ou ArrayBuffer. Cet attribut n'est légal qu'après avoir lu l'opération.

3.ReadyState: Renvoie l'état actuel de l'opération.

1.Abort (): Interruption de lecture de lecture. La valeur de ReadyState devient 2. 2.

2. ReadasArrayBuffer (blob): Lisez le blob spécifié, comme un objet de fichier (l'objet de fichier est un blob spécial). Tant que la lecture est terminée, la valeur de la propriété ReadyState deviendra 2 et l'attribut de résultat est un ArrayBuffer qui représente les données de fichier.

3. Readasdataurl (blob): Lisez le blob spécifié, comme un objet de fichier (un blob spécial). Tant que la lecture est terminée, la valeur de l'attribut ReadyState deviendra 2. L'attribut de résultat est une URL qui représente les données de fichier, et le format de données est le Base64 String String String

 <entrée type = file onchange = préviewfile ()> <br> <img src = height = 200 var préview = document.queeryselector ('img'); Fichiers [0];

4. Readastext (boob, codage): Lisez le blob spécifié, comme un objet de fichier (l'objet de fichier est un blob spécial). Tant que vous le lisez, la valeur de la propriété ReadyState deviendra 2, et l'attribut de résultat est une chaîne de texte qui représente les données de fichier. Le deuxième paramètre est facultatif.

1.Abort: terminaison lors de la lecture du fonctionnement.

2. Erreur: déclenché lors de la lecture des opérations pendant l'opération.

3. Téléchargez: déclenché lors de la lecture de l'opération avec succès.

4.Loadend: déclenché à la fin de l'opération de lecture. Impossible de lire le succès ou l'échec.

5.Loadstart: déclenché au début de l'opération de lecture.

6. Procédé: déclenché pendant le processus de lecture.

À l'aide de l'objet de fichier dans HTML5, vous pouvez accéder aux fichiers locaux sélectionnés et lire le contenu dans ces fichiers. L'objet de fichier provient de l'élément d'entrée ou de l'interface glisser-déposer.

 <entrée type = fichier id = entrée>

Accès aux fichiers sélectionnés via l'entrée

 var selectFile = document.getElementById ('entrée').

Vous ne pouvez choisir qu'un seul fichier à la fois à la fois. Sélectionnez plusieurs fichiers à la fois avant Gecko 1.9.2.

Pour l'interface glisser-déposer, vous pouvez afficher HTML5 Dragevent.

Étape 1: Créez une zone de placement. Un élément ordinaire, comme Div, P, etc.

Étape 2: Ajouter le programme de traitement des événements Drop, Dragosenter dans la zone placée. Le rôle clé est le programme de traitement des événements de chute.

Vous trouverez ci-dessous un exemple de diagramme de détruire court:

 <div id = 'dropbox' class = 'dropbox'> </ div> .dropbox {border: solide 3px red;

 Var dropbox; dropbox = document.getElementyd (dropbox); (E) {E.StOPPropagation (); ); I]; ));

Ce qui précède est l'interface du fichier HTML5 introduit par Xiaobian pour télécharger des fichiers sur la page Web. Merci beaucoup pour votre soutien pour le site Web VEVB Wulin!