HTML5-Lerncode-Beispiel für die FileReader-Schnittstelle 9 (Bild)
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 个<input>-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
| 方法名 | 参数 | 描述 |
| readAsBinaryString | file | 将文件读取为二进制码 |
| readAsText | file,[encoding] | 将文件读取为文本 |
| readAsDataURL | file | 将文件读取为DataURL |
| readAsArrayBuffer | file | 将文件读取为ArrayBuffer对象 |
| abort | (none) | 中断读取操作 |
| Methodenname | Parameter | Beschreibung|
| 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 | tr>
| 事件 | 描述 |
| onabort | 数据读取中断时触发 |
| onerror | 数据读取出错时触发 |
| onloadstart | 数据读取开始时触发 |
| onprogress | 数据读取中 |
| onload | 数据读取成功完成时触发 |
| onloadend | 数据读取完成时触发，无论成功失败 |
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('disabled', 'disabled');
}
// 将文件以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 = '<img src="' + this.result + '" alt="图片" />';
}
}
// 将文件以二进制形式读入页面
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>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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1393
52
Was sind die internen Schnittstellen eines Computer-Motherboards? Empfohlene Einführung in die internen Schnittstellen eines Computer-Motherboards
Mar 12, 2024 pm 04:34 PM
Obwohl der Installationsprozess einfach ist, stoßen Benutzer beim Zusammenbau des Computers häufig auf Probleme mit der Verkabelung. Obwohl sich der Lüfter drehen kann, funktioniert er beim Booten möglicherweise nicht. Es kommt zu einem F1-Fehler „CPUFanError“, der auch dazu führt, dass der CPU-Kühler die Geschwindigkeit nicht intelligent anpassen kann. Lassen Sie uns das allgemeine Wissen über die Schnittstellen CPU_FAN, SYS_FAN, CHA_FAN und CPU_OPT auf der Hauptplatine des Computers teilen. Populäre Wissenschaft über die Schnittstellen CPU_FAN, SYS_FAN, CHA_FAN und CPU_OPT auf der Hauptplatine des Computers 1. CPU_FANCPU_FAN ist eine dedizierte Schnittstelle für den CPU-Kühler und arbeitet mit 12 V
Gängige Programmierparadigmen und Entwurfsmuster in der Go-Sprache
Mar 04, 2024 pm 06:06 PM
Als moderne und effiziente Programmiersprache verfügt die Go-Sprache über umfangreiche Programmierparadigmen und Entwurfsmuster, die Entwicklern beim Schreiben von qualitativ hochwertigem, wartbarem Code helfen können. In diesem Artikel werden gängige Programmierparadigmen und Entwurfsmuster in der Go-Sprache vorgestellt und spezifische Codebeispiele bereitgestellt. 1. Objektorientierte Programmierung In der Go-Sprache können Sie Strukturen und Methoden verwenden, um objektorientierte Programmierung zu implementieren. Durch die Definition einer Struktur und das Binden von Methoden an die Struktur können die objektorientierten Funktionen der Datenkapselung und Verhaltensbindung erreicht werden. Paketmaini
Einführung in PHP-Schnittstellen und deren Definition
Mar 23, 2024 am 09:00 AM
Einführung in die PHP-Schnittstelle und wie sie definiert ist. PHP ist eine in der Webentwicklung weit verbreitete Open-Source-Skriptsprache. Sie ist flexibel, einfach und leistungsstark. In PHP ist eine Schnittstelle ein Werkzeug, das gemeinsame Methoden zwischen mehreren Klassen definiert, um Polymorphismus zu erreichen und Code flexibler und wiederverwendbar zu machen. In diesem Artikel werden das Konzept von PHP-Schnittstellen und deren Definition vorgestellt und spezifische Codebeispiele zur Veranschaulichung ihrer Verwendung bereitgestellt. 1. PHP-Schnittstellenkonzept Die Schnittstelle spielt eine wichtige Rolle in der objektorientierten Programmierung und definiert die Klassenanwendung
Lösung für NotImplementedError()
Mar 01, 2024 pm 03:10 PM
Der Grund für den Fehler liegt in Python. Der Grund, warum NotImplementedError() in Tornado ausgelöst wird, kann darin liegen, dass eine abstrakte Methode oder Schnittstelle nicht implementiert ist. Diese Methoden oder Schnittstellen werden in der übergeordneten Klasse deklariert, aber nicht in der untergeordneten Klasse implementiert. Unterklassen müssen diese Methoden oder Schnittstellen implementieren, um ordnungsgemäß zu funktionieren. Die Lösung dieses Problems besteht darin, die von der übergeordneten Klasse deklarierte abstrakte Methode oder Schnittstelle in der untergeordneten Klasse zu implementieren. Wenn Sie eine Klasse verwenden, um von einer anderen Klasse zu erben, und dieser Fehler angezeigt wird, sollten Sie alle in der übergeordneten Klasse deklarierten abstrakten Methoden in der untergeordneten Klasse implementieren. Wenn Sie eine Schnittstelle verwenden und dieser Fehler angezeigt wird, sollten Sie alle in der Schnittstelle deklarierten Methoden in der Klasse implementieren, die die Schnittstelle implementiert. Wenn Sie sich nicht sicher sind, welches
Anwendung von Schnittstellen und abstrakten Klassen in Entwurfsmustern in Java
May 01, 2024 pm 06:33 PM
Schnittstellen und abstrakte Klassen werden in Entwurfsmustern zur Entkopplung und Erweiterbarkeit verwendet. Schnittstellen definieren Methodensignaturen, abstrakte Klassen stellen eine teilweise Implementierung bereit und Unterklassen müssen nicht implementierte Methoden implementieren. Im Strategiemuster wird die Schnittstelle zum Definieren des Algorithmus verwendet, und die abstrakte Klasse oder konkrete Klasse stellt die Implementierung bereit, wodurch ein dynamischer Wechsel von Algorithmen ermöglicht wird. Im Beobachtermuster werden Schnittstellen zum Definieren des Beobachterverhaltens verwendet, und abstrakte oder konkrete Klassen werden zum Abonnieren und Veröffentlichen von Benachrichtigungen verwendet. Im Adaptermuster werden Schnittstellen verwendet, um vorhandene Klassen anzupassen, oder konkrete Klassen können kompatible Schnittstellen implementieren und so eine Interaktion mit Originalcode ermöglichen.
Einblick in das Hongmeng-System: tatsächliche Funktionsmessung und Nutzungserfahrung
Mar 23, 2024 am 10:45 AM
Als neues Betriebssystem von Huawei hat das Hongmeng-System in der Branche für großes Aufsehen gesorgt. Als neuer Versuch von Huawei nach dem US-Verbot setzt das Hongmeng-System große Hoffnungen und Erwartungen. Kürzlich hatte ich das Glück, ein Huawei-Mobiltelefon mit dem Hongmeng-System zu bekommen. Nach einer Nutzungsphase und tatsächlichen Tests werde ich einige Funktionstests und Nutzungserfahrungen des Hongmeng-Systems teilen. Werfen wir zunächst einen Blick auf die Benutzeroberfläche und die Funktionen des Hongmeng-Systems. Das Hongmeng-System übernimmt insgesamt den Huawei-eigenen Designstil, der einfach, klar und reibungslos in der Bedienung ist. Auf dem Desktop diverse
Innerklassenimplementierung von Schnittstellen und abstrakten Klassen in Java
Apr 30, 2024 pm 02:03 PM
Java ermöglicht die Definition innerer Klassen innerhalb von Schnittstellen und abstrakten Klassen und bietet so Flexibilität für die Wiederverwendung und Modularisierung von Code. Innere Klassen in Schnittstellen können spezifische Funktionen implementieren, während innere Klassen in abstrakten Klassen allgemeine Funktionen definieren können und Unterklassen konkrete Implementierungen bereitstellen.
Java-Schnittstellen und abstrakte Klassen: Der Weg zum Programmierhimmel
Mar 04, 2024 am 09:13 AM
Schnittstelle: Eine implementierte Vertragsschnittstelle definiert eine Reihe von Methodensignaturen in Java, stellt jedoch keine konkrete Implementierung bereit. Es fungiert als Vertrag, der Klassen, die die Schnittstelle implementieren, dazu zwingt, ihre angegebenen Methoden zu implementieren. Die Methoden in der Schnittstelle sind abstrakte Methoden und haben keinen Methodenkörper. Codebeispiel: publicinterfaceAnimal{voideat();voidsleep();} Abstrakte Klasse: Teilweise implementierter Entwurf Eine abstrakte Klasse ist eine übergeordnete Klasse, die eine teilweise Implementierung bereitstellt, die von ihren Unterklassen geerbt werden kann. Im Gegensatz zu Schnittstellen können abstrakte Klassen konkrete Implementierungen und abstrakte Methoden enthalten. Abstrakte Methoden werden mit dem Schlüsselwort abstract deklariert und müssen von Unterklassen überschrieben werden. Codebeispiel: publicabstractcla
