Exemples d'utilisation de l'API de fichiers HTML5 pour lire des fichiers locaux (tels que des images, des PDF, etc.)

À l'ère du HTML4, si nous voulons présenter l'image locale d'un utilisateur sur une page Web, l'utilisateur doit d'abord télécharger l'image sur le serveur, puis télécharger l'image en fonction de l'adresse d'image fournie par le serveur avant que l'image puisse être affiché sur la page Web. Ces allers-retours ont coûté au moins deux fois le trafic de cette image, sans parler des ressources dépensées par le serveur pour stocker cette image et du coût injuste pour l'utilisateur de télécharger la mauvaise image (car à l'ère HTML4, les utilisateurs choisissent Après le téléchargement une image, vous ne pouvez souvent voir que le nom de fichier de l'image et vous ne pouvez pas confirmer davantage si l'image est celle que vous souhaitez télécharger en la prévisualisant).

HTML5 offre une nouvelle façon de jouer. Avec le navigateur seul, vous pouvez restituer, lire et traiter des fichiers locaux (en fait, il peut également s'agir de fichiers distants) (principalement des images), et tout cela se fait via l'API de fichiers HTML5. atteindre.

Le premier est la structure des données. HTML5 définit un type d'objet fichier pour représenter les fichiers, et chaque objet fichier correspond à un fichier. L'objet fichier possède trois attributs : nom, taille et type. name est le nom du fichier sans chemin, size est la taille du fichier en octets et type est le MIME du fichier (tel que image/jpg).

L'objet fichier n'existe pas seul, mais sous la forme d'un tableau, dans un tableau nommé FileList. Alors, comment obtenir ce tableau FileList ? Actuellement, il existe deux façons d'obtenir FileList en HTML5, l'une via la saisie du type de fichier et l'autre via l'événement drop de l'opération glisser-déposer.

Obtenez FileList via la saisie du type de fichier

 <input id=file-input type=fichier />

Ou le nouvel attribut multiple en HTML5 qui permet la sélection de plusieurs fichiers :

 <input id=file-input type=fichier multiple />

Généralement, nous attachons un événement onchange à input:file afin qu'une fois que l'utilisateur a sélectionné le fichier, les étapes suivantes telles que la lecture du fichier puissent être effectuées immédiatement :

 //Jsvar natif inputElement = document.getElementById(file-input);inputElement.addEventListener(change, handleFiles, false);function handleFiles() { var fileList = this.files;//jquery version$('#file-input; ').on('change', function() { var fileList = this.files;});

Tout d’abord, définissez une zone de glisser-déposer :

 <div id=dropbox style=width : 200px;height : 200px;></div>

De plus, afin de déclencher l'événement drop, nous devons empêcher le comportement par défaut des événements dragenter et dragover :

 var dropbox;dropbox = document.getElementById(dropbox);dropbox.addEventListener(dragenter, dragenter, false);dropbox.addEventListener(dragover, dragover, false);dropbox.addEventListener(drop, drop, false);function dragenter(e) { e.stopPropagation(); e.preventDefault();}fonction dragover(e) { e.stopPropagation(); e.preventDefault();}

Ensuite, nous pouvons récupérer la fileList dans le rappel de l'événement drop :

 function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files;

HTML5 propose deux solutions : FileReader et ObjectUrl.

Vous devez d’abord instancier l’objet FileReader :

 var lecteur = new FileReader();

L'utilisation de FileReader pour lire des objets fichier est un processus asynchrone. Nous devons d'abord définir le rappel de l'événement de chargement pour FileReader pour indiquer à FileReader quelles autres opérations il doit effectuer après avoir lu les données de l'objet fichier :

 reader.onload = function(e) { document.getElementById(image).src = e.target.result }

La signification du code ci-dessus est qu'après que FileReader ait lu les données de l'image, il place les données (DataUrl) dans l'attribut src.

Enfin, les différentes méthodes de FileReader sont utilisées pour décider quel format de données utiliser pour stocker les données de l'objet fichier après leur lecture, et implémenter la lecture :

1. readAsArrayBuffer(file) : lit l'objet fichier et le stocke en tant qu'objet ArrayBuffer (je n'ai pas encore compris ce qu'est l'objet ArrayBuffer, il devrait s'agir d'une structure de données générée pour un accès efficace aux données).
2. readAsText(file [, 'UTF-8']) : lit l'objet fichier en mode texte général. Il est à noter que le deuxième paramètre (facultatif) peut être utilisé pour spécifier le codage des caractères.
3. readAsDataURL(file) : lit l'objet fichier et le stocke sous forme de chaîne au format data : URL.

ObjectURL est équivalent à un chemin temporaire vers le fichier. Ce chemin temporaire peut être généré et publié à tout moment. Lorsqu'il est utilisé dans le navigateur local, il n'est pas différent d'une URL ordinaire.

Prenons l'exemple de l'affichage d'une image locale sur la page :

 var img = document.createElement(img);img.src = window.URL.createObjectURL(file);

À ce stade, src ressemble à : blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40

L'utilisation de ce src permet au navigateur de lire l'image localement.

Par rapport à l'utilisation de FileReader pour générer l'encodage base64 de l'image et la placer dans le src, les performances de cette solution ont été grandement améliorées.

En comparant ces deux solutions pour lire des objets File, FileReader convient au téléchargement de fichiers, tandis qu'ObjectURL convient au fonctionnement directement dans le navigateur, puis au téléchargement des données traitées après l'opération, par exemple en utilisant Canvas pour prendre des captures d'écran ou effectuer une compression d'image, etc. . Bien entendu, tout dépend de la compatibilité.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.