Cette fois, je vais vous expliquer comment utiliser la distribution FileReader de H5 pour lire des fichiers et une brève introduction à ses méthodes. Quelles sont les précautions à prendre pour utiliser la distribution FileReader de H5 pour lire des fichiers et son introduction à la méthode. Voici des cas pratiques. un coup d'oeil.
Introduisez d'abord quelques méthodes et événements de FileReader dans H5
Méthode FileReader
Fonction de nom
about() Terminer la lecture
readAsBinaryString(file) Lire le fichier en codage binaire
readAsDataURL(file) Lire le fichier en codage DataURL
readAsText(file , [encoding] ) Lire le fichier sous forme de texte
readAsArrayBuffer(file) Lire le fichier sous forme de arraybuffer
Événement FileReader
Nom
Fonction
onloadstart Déclenché lorsque la lecture commence
onprogress Lecture en cours
onloadend Déclenché lorsque la lecture est terminée, quel que soit le succès ou l'échec
onload se déclenche lorsque la lecture du fichier est terminée avec succès
onabort se déclenche en cas d'interruption L'idée principale est de diviser le fichier en morceaux et de lire chaque M.
Partie HTML
partie loadFile.js<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form> <fieldset> <legend>分步读取文件:</legend> <input type="file" id="File"> <input type="button" value="中断" id="Abort"> <p> <lable>读取进度:</lable> <progress id="Progress" value="0" max="100"></progress> </p> </fieldset> </form> <script src="./loadFile.js"></script> <script> var progress = document.getElementById('Progress');//进度条 var events = { load: function () { console.log('loaded'); }, progress: function (percent) { console.log(percent); progress.value = percent; }, success: function () { console.log('success'); } }; var loader; // 选择好要上传的文件后触发onchange事件 document.getElementById('File').onchange = function (e) { var file = this.files[0]; console.log(file) //loadFile.js loader = new FileLoader(file, events); }; document.getElementById('Abort').onclick = function () { loader.abort(); } </script> </body> </html>
/* * 文件读取模块 * file 文件对象 * events 事件回掉对象 包含 success , load, progress */ var FileLoader = function (file, events) { this.reader = new FileReader(); this.file = file; this.loaded = 0; this.total = file.size; //每次读取1M this.step = 1024 * 1024; this.events = events || {}; //读取第一块 this.readBlob(0); this.bindEvent(); } FileLoader.prototype = { bindEvent: function (events) { var _this = this, reader = this.reader; reader.onload = function (e) { _this.onLoad(); }; reader.onprogress = function (e) { _this.onProgress(e.loaded); }; // start 、abort、error 回调暂时不加 }, // progress 事件回掉 onProgress: function (loaded) { var percent, handler = this.events.progress;//进度条 this.loaded += loaded; percent = (this.loaded / this.total) * 100; handler && handler(percent); }, // 读取结束(每一次执行read结束时调用,并非整体) onLoad: function () { var handler = this.events.load; // 应该在这里发送读取的数据 handler && handler(this.reader.result); // 如果未读取完毕继续读取 if (this.loaded < this.total) { this.readBlob(this.loaded); } else { // 读取完毕 this.loaded = this.total; // 如果有success回掉则执行 this.events.success && this.events.success(); } }, // 读取文件内容 readBlob: function (start) { var blob, file = this.file; // 如果支持 slice 方法,那么分步读取,不支持的话一次读取 if (file.slice) { blob = file.slice(start, start + this.step); } else { blob = file; } this.reader.readAsText(blob); }, // 中止读取 abort: function () { var reader = this.reader; if(reader) { reader.abort(); } } }
Comment soumettre un menu déroulant en HTML Conservez ensuite la valeur sélectionnée et ne revenez pas à la valeur par défaut
Comment utiliser l'attribut title du HTML pour afficher le texte au survol de la souris
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!