Heim > Artikel > Web-Frontend > HTML5-Lerncode-Beispiel für die FileReader-Schnittstelle 9 (Bild)

HTML5-Lerncode-Beispiel für die FileReader-Schnittstelle 9 (Bild)

黄舟Original: 2017-03-13 17:27:011252Durchsuche

1. FileReader-Übersicht

FileReader-Objekt ermöglicht das asynchrone Lesen von Dateien (oder Rohdatenpuffern), die auf dem Computer des Benutzers gespeichert sind File- oder Blob-Objekte zur Angabe der zu lesenden Datei oder Daten.

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

auf 🎜> aus.

2. FileReader-Schnittstellenmethode

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

Beschreibung

tr> Tabelle>

Methodenname	Parameter
readAsBinaryString	Datei	Datei als Binärcode lesen
readAsText	Datei,[Kodierung]	Datei als Text lesen
readAsDataURL	Datei	Datei als DataURL lesen
readAsArrayBuffer	Datei	Datei als `ArrayBuffer-Objekt`
abbrechen	(keine)	Lesevorgang unterbrechen

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

3 , FileReader-Schnittstelle

Ereignis

Ereignis	Beschreibung
onabort	Wird ausgelöst, wenn das Lesen von Daten unterbrochen wird
onerror	Wird ausgelöst, wenn ein Datenlesefehler auftritt
onloadstart	Wird ausgelöst, wenn das Lesen der Daten beginnt
onprogress	Daten lesen
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>

4. Anwendungsbeispiele

Das obige ist der detaillierte Inhalt vonHTML5-Lerncode-Beispiel für die FileReader-Schnittstelle 9 (Bild). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Funktionsbeispielcode-Analyse verschiedener H5-Header-Meta-TagsNächster Artikel：Funktionsbeispielcode-Analyse verschiedener H5-Header-Meta-Tags

In Verbindung stehende Artikel

Mehr sehen