Cet article présente une brève introduction à la lecture distribuée de fichiers HTML5 FileReader et à sa méthode, et la partage avec tout le monde. Les détails sont les suivants :
rendus
L'ancienne règle est de montrer les rendus en premier.
Présentez d’abord quelques méthodes et événements de FileReader dans H5
Méthode FileReader
| nom | effet |
|---|---|
| à propos de() | Terminer la lecture |
| readAsBinaryString (fichier) | Lire le fichier sous forme d'encodage binaire |
| readAsDataURL (fichier) | Lire le fichier en tant que DataURL codé |
| readAsText (fichier, [encodage]) | Lire le fichier sous forme de texte |
| readAsArrayBuffer(fichier) | Lire le fichier dans arraybuffer |
FileReaderEvent
| nom | effet |
|---|---|
| onloadstart | Se déclenche lorsque la lecture commence |
| en cours | En lisant |
| fin de chargement | Déclenché par l'achèvement de la lecture, quel que soit le succès ou l'échec |
| en chargement | Déclenché lorsque la lecture du fichier se termine avec succès |
| à l'abandon | Déclenché sur interruption |
| une erreur | Déclenché sur erreur |
code
L'idée principale de la lecture distribuée de fichiers est de diviser le fichier en blocs et de les lire tous les M.
Partie HTML
<!DOCTYPE html><html lang=fr><head> <meta charset=UTF-8> <title>Document</title></head><body> <form> <fieldset> <legend>Lire étape par étape Fichier :</legend> <input type=file id=File> <input type=button value=interrupt id=Abort> <p> <lable>Progression de la lecture :</lable> <progress id=Progress value=0 max=100></progress> </p> </fieldset> </form> <script src=./loadFile.js></script> <script> var progress = document.getElementById('Progress' );//Barre de progression var events = {load: function () { console.log('loaded' }, progress: function (pourcentage) { console.log(percent); success: function () { console.log('success'); } }; // Déclenche l'événement onchange après avoir sélectionné le fichier à télécharger document.getElementById('File').onchange = function (e) { var fichier = this.files[0] ; console.log(fichier) //loadFile.js chargeur = nouveau FileLoader(fichier, événements } ; document.getElementById('Abort').onclick = function () { loader.abort( } </script></body></html>section loadFile.js
/** Module de lecture de fichier* fichier objet de fichier* événements l'objet de retour d'événement inclut le succès, le chargement, la progression*/var FileLoader = function (file, events) { this.reader = new FileReader(); chargé = 0; this.total = file.size; //Lire 1M à chaque fois this.step = 1024 * 1024; //Lire le premier bloc this.readBlob(0); this.bindEvent(); }FileLoader.prototype = { bindEvent: function (events) { var _this = this, reader = this.reader; ) { _this.onLoad(); lecteur.onprogress = function (e) { _this.onProgress(e.loaded); , abandon, les rappels d'erreur ne sont pas ajoutés pour le moment}, // L'événement progress renvoie onProgress : function (loaded) { var percent, handler = this.events.progress;//Progress bar this.loaded += approved percent ; = (this.loaded / this.total) * 100; handler && handler(percent); }, //Fin de lecture (appelée à la fin de chaque exécution de lecture, pas l'intégralité) onLoad: function () { var handler = this.events.load; // Les données lues doivent être envoyées ici handler && handler(this.reader.result); // Si la lecture n'est pas terminée, continuez la lecture if (this.loaded < this.total) { this.readBlob(this.loaded); } else { // Lecture terminée this.loaded = this.total; // Si le succès revient, exécutez this.events.success && this.events.success(); } }, // Lire le contenu du fichier readBlob: function (start) { var blob, file = this.file; // Si la méthode slice est prise en charge, alors lisez par étapes, sinon, une fois Lire if (file.slice) { blob = file.slice(start, start + this.step } else { blob = file; this.reader.readAsText(blob); Abandonner la lecture abort : function () { var reader = this.reader; if(reader) { reader.abort( } }}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.