Maison >interface Web >Tutoriel H5 >Comment utiliser la distribution FileReader de H5 pour lire des fichiers et une introduction à ses méthodes

Comment utiliser la distribution FileReader de H5 pour lire des fichiers et une introduction à ses méthodes

php中世界最好的语言original: 2018-01-29 09:34:332293parcourir

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(&#39;Progress&#39;);//进度条
 
            var events = {
                load: function () {
                    console.log(&#39;loaded&#39;);
                },
                progress: function (percent) {
                    console.log(percent);
                    progress.value = percent;
                },
                success: function () {
                    console.log(&#39;success&#39;);
                }
            };
            var loader;
 
            // 选择好要上传的文件后触发onchange事件
            document.getElementById(&#39;File&#39;).onchange = function (e) {
                var file = this.files[0];
                console.log(file)
 
                //loadFile.js
                loader = new FileLoader(file, events);
            };
 
            document.getElementById(&#39;Abort&#39;).onclick = function () {
                loader.abort();
            }
        </script>
</body>
</html>

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site php chinois !

Lecture connexe :

/*
* 文件读取模块
* 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 définir la largeur et la hauteur des hyperliens

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!

php html JS 事件

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Problèmes liés à l'adaptation des pages HTML5 à iPhoneXArticle suivant：Problèmes liés à l'adaptation des pages HTML5 à iPhoneX

Articles Liés

Voir plus