suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie man die FileReader-Distribution von H5 zum Lesen von Dateien verwendet und eine Einführung in ihre Methoden

Wie man die FileReader-Distribution von H5 zum Lesen von Dateien verwendet und eine Einführung in ihre Methoden

php中世界最好的语言
php中世界最好的语言Original
2018-01-29 09:34:332284Durchsuche

Dieses Mal werde ich Ihnen zeigen, wie Sie die FileReader-Distribution von H5 zum Lesen von Dateien verwenden und welche Vorsichtsmaßnahmen Sie für die Verwendung der FileReader-Distribution zum Lesen von Dateien treffen. Hier sind praktische Beispiele Schauen Sie mal rein.

Stellen Sie zunächst einige Methoden und Ereignisse von FileReader in H5 vor

FileReader-Methode

Namensfunktion

about() Lesevorgang beenden

readAsBinaryString(file) Die Datei als Binärkodierung lesen

readAsDataURL(file) Die Datei als DataURL-Kodierung lesen

readAsText(file , [encoding] ) Lesen Sie die Datei als Text

readAsArrayBuffer(file) Lesen Sie die Datei als Arraybuffer

FileReader-Ereignis

Name

Funktion

onloadstart Wird ausgelöst, wenn der Lesevorgang beginnt

onprogress Lesevorgang läuft

onloadend Wird ausgelöst, wenn der Lesevorgang abgeschlossen ist, unabhängig von Erfolg oder Misserfolg

onload Wird ausgelöst, wenn das Lesen der Datei erfolgreich abgeschlossen wurde

onabort Wird ausgelöst, wenn es unterbrochen wird. Die Kernidee besteht darin, die Datei in Blöcke zu unterteilen und jeden M.

HTML-Teil

zu lesen

loadFile.js-Teil

<!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>

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Verwandte Lektüre: 
/*
* 文件读取模块
* 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();
        }
    }
}

So legen Sie die Breite und Höhe von Hyperlinks fest

So übermitteln Sie ein Dropdown-Menü in HTML Behalten Sie dann den ausgewählten Wert bei und kehren Sie nicht zum Standardwert zurück

So verwenden Sie das Titelattribut von HTML, um Text beim Bewegen der Maus anzuzeigen

Das obige ist der detaillierte Inhalt vonWie man die FileReader-Distribution von H5 zum Lesen von Dateien verwendet und eine Einführung in ihre Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php html JS 事件
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Probleme im Zusammenhang mit der Anpassung von HTML5-Seiten an iPhoneXNächster Artikel：Probleme im Zusammenhang mit der Anpassung von HTML5-Seiten an iPhoneX

In Verbindung stehende Artikel

Mehr sehen