Heim > Web-Frontend > H5-Tutorial > Hauptteil

Detaillierte Einführung in die HTML5 FileReader-Schnittstelle

黄舟
Freigeben: 2017-04-13 10:31:02
Original
1528 Leute haben es durchsucht

1. FileReader-Übersicht Das

FileReader-Objekt ermöglicht es Webanwendungen, den Inhalt von Dateien (oder Rohdatenpuffern), die auf dem Computer des Benutzers gespeichert sind, mithilfe von File oder Das Objekt gibt die Datei oder Daten an, die gelesen werden sollen. Blob

Das File-Objekt kann ein

-Objekt sein, das zurückgegeben wird, nachdem der Benutzer eine Datei in einem 个<input>-Element ausgewählt hat, ein FileList-Objekt, das durch einen Drag-and-Drop-Vorgang generiert wurde, oder ein DataTransfer Objekt, das von einem HTMLCanvasElement-Element generiert wird. Führen Sie mozGetAsFile()方法后返回结果 auf 🎜> aus.

2. FileReader-Schnittstellenmethode

Beschreibung

Datei,[Kodierung]
Methodenname
方法名 参数 描述
readAsBinaryString file 将文件读取为二进制码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
readAsArrayBuffer file 将文件读取为ArrayBuffer对象
abort (none) 中断读取操作

Parameter

readAsBinaryString file Datei als Binärcode lesen
readAsText Datei als Text lesen
readAsDataURL Datei Datei als DataURL lesen
readAsArrayBuffer file Lesen Sie die Datei als ArrayBuffer-Objekt
abbrechen (none) Unterbrechen Lesevorgang

事件 描述
onabort 数据读取中断时触发
onerror 数据读取出错时触发
onloadstart 数据读取开始时触发
onprogress 数据读取中
onload 数据读取成功完成时触发
onloadend 数据读取完成时触发,无论成功失败
3. FileReader-Schnittstelle

Ereignis

Ereignis

Beschreibung

onabort Wird ausgelöst, wenn das Lesen der Daten unterbrochen wird
onerror Wird ausgelöst, wenn ein Datenlesefehler auftritt span>
onloadstart Ausgelöst, wenn Daten Das Lesen beginnt
onprogress Daten werden geladen
onload Wird ausgelöst, wenn das Lesen der Daten erfolgreich abgeschlossen wurde
onloadend Wird ausgelöst, wenn das Lesen der Daten abgeschlossen ist, unabhängig von Erfolg oder Misserfolg

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Html5Test</title>
</head>
<body>
    <article>
        <header></header>
        <section>
            <p>
                <lable>请选择一个文件:</lable>
                <input type="file" id="file_reader">
                <input type="button" value="读取图像" onclick="readAsDataUrl();">
                <input type="button" value="读取二进制数据" onclick="readAsBinaryString();">
                <input type="button" value="读取文本文件" onclick="readAsText();">
            </p>
            <p id="file_reader_result" name="file_reader_result">
                <!-- 这里用来显示读取结果 -->
            </p>
            <script>
            var file_reader_result = document.getElementById("file_reader_result");
            // 检测浏览器是否支持FileReader
            if (typeof FileReader == "undefined") {
                file_reader_result.innerHTML = "您的浏览器不支持FileReader";
                file.setAttribute(&#39;disabled&#39;, &#39;disabled&#39;);
            }
            // 将文件以Data Url形式读入页面
            function readAsDataUrl(){
                // 检查是否为图像文件
                var f = document.getElementById("file_reader").files[0];
                if (!/image\/\w+/.test(f.type)) {
                    file_reader_result.innerHTML = "请上传图片文件!";
                    return false;
                };
                var reader = new FileReader();
                // 将文件以Data Url形式读入页面
                reader.readAsDataURL(f);
                reader.onload = function(e){
                    file_reader_result.innerHTML = &#39;<img src="&#39; + this.result + &#39;" alt="图片" />&#39;;
                }
            }
            // 将文件以二进制形式读入页面
            function readAsBinaryString(){
                // 检查是否为图像文件
                var f = document.getElementById("file_reader").files[0];
                if (!/image\/\w+/.test(f.type)) {
                    file_reader_result.innerHTML = "请上传图片文件!";
                    return false;
                };
                var reader = new FileReader();
                // 将文件以二进制形式读入页面
                reader.readAsBinaryString(f);
                reader.onload = function(e){
                    file_reader_result.innerHTML = this.result;
                }
            }
            // 将文件以文本形式读入页面 目前测试仅支持txt文件
            function readAsText(){
                // 检查是否是文本文件
                var f = document.getElementById("file_reader").files[0];
                if (!/text\/\w+/.test(f.type)) {
                    file_reader_result.innerHTML = "请上传文本文件!";
                    return false;
                };
                var reader = new FileReader();
                // 将文件以文本形式读入页面
                reader.readAsText(f);
                reader.onload = function(e){
                    file_reader_result.innerHTML = this.result;
                }
            }
            </script>
        </section>
    </article>
</body>
</html>
Nach dem Login kopieren
4. Anwendungsbeispiele

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die HTML5 FileReader-Schnittstelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!