1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
---
title: FileReader
slug: Web/API/FileReader
translation_of: Web/API/FileReader
---
<div>{{APIRef("File API")}}</div>
<p>Mit dem FileReader-Objekt können Webapplikationen den Inhalt von auf dem Computer des Benutzers gespeicherten Dateien (oder Rohdaten-Buffer) asynchron lesen. Mit {{domxref("File")}} oder {{domxref("Blob")}}-Objekten wird die zu lesende Datei oder die zu lesenden Daten spezifiziert.</p>
<p>File Objekte können über ein {{domxref("FileList")}} Objekt erhalten werden, welches als Ergebnis einer Dateiauswahl durch einen Benutzer über das {{HTMLElement("input")}} Element zurückgegeben wird. Weitere mögliche Quellen sind drag and drop Ereignisse über ein <a href="/en-US/docs/Web/API/DataTransfer"><code>DataTransfer</code></a> Objekt oder über die <code>mozGetAsFile()</code> API des {{domxref("HTMLCanvasElement")}}.</p>
<h2 id="Konstruktor">Konstruktor</h2>
<pre class="syntaxbox">FileReader FileReader();</pre>
<p>Im Kapitel <a href="/de/docs/Zugriff_auf_Dateien_von_Webapplikationen">Zugriff auf Dateien von Webapplikationen</a> finden sich weitere Details und Beispiele.</p>
<h2 id="Eigenschaften">Eigenschaften</h2>
<dl>
<dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
<dd>Ein {{domxref("DOMError")}}, der den Fehler angibt, welcher beim Lesen der Datei entstanden ist.</dd>
<dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
<dd>Eine Zahl, welche den Status des <code>FileReader</code> angibt. Möglich ist eine der {{anch("Status-Konstanten")}}.</dd>
<dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
<dd>Der Inhalt der Datei. Diese Eigenschaft ist nur gültig, nachdem der Lesevorgang abgeschlossen ist. Das Format der Daten hängt davon ab, welche der Methoden zum Starten des Lesevorgangs benutzt wurde.</dd>
</dl>
<h3 id="Event-Handler">Event-Handler</h3>
<dl>
<dt>{{domxref("FileReader.onabort")}}</dt>
<dd>Ein Handler für das {{event("abort")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang abgebrochen wird.</dd>
<dt>{{domxref("FileReader.onerror")}}</dt>
<dd>Ein Handler für das {{event("error")}}-Event. Dieser Event wird gefeuert, wenn beim Lesevorgang ein Fehler ensteht.</dd>
<dt>{{domxref("FileReader.onload")}}</dt>
<dd>Ein Handler für das {{event("load")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang erfolgreich beendet wird.</dd>
<dt>{{domxref("FileReader.onloadstart")}}</dt>
<dd>Ein Handler für das {{event("loadstart")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang gestartet wird.</dd>
<dt>{{domxref("FileReader.onloadend")}}</dt>
<dd>Ein Handler für das {{event("loadend")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang beendet wird (entweder erfolgreich oder fehlerhaft).</dd>
<dt>{{domxref("FileReader.onprogress")}}</dt>
<dd>Ein Handler für das {{event("progress")}}-Event. Dieser Event wird gefeuert, während ein {{domxref("Blob")}}-Inhalt gelesen wird.</dd>
</dl>
<div class="note">
<p>Hinweis: Da<code>FileReader</code> von {{domxref("EventTarget")}} erbt, kann auf alle diese Events auch mit der {{domxref("EventTarget.addEventListener()","addEventListener")}} Methode gehört werden.</p>
</div>
<h3 id="Status-Konstanten">Status-Konstanten</h3>
<ul>
<li><code>EMPTY</code> : <code>0</code> : Noch keine Daten geladen.</li>
<li><code>LOADING</code> : <code>1</code> : Daten werden geladen.</li>
<li><code>DONE</code> : <code>2</code> : Der Lesevorgang ist abgeschlossen.</li>
</ul>
<h2 id="Methoden">Methoden</h2>
<dl>
<dt>{{domxref("FileReader.abort()")}}</dt>
<dd>Bricht den Lesevorgang ab. Nach dem Return wird der <code>readyState</code> zu <code>DONE</code>.</dd>
<dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}</dt>
<dd>Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und, wenn der Lesevorgang abgeschlossen ist, enthält <code>result</code> ein {{domxref("ArrayBuffer")}} mit den Daten.</dd>
<dt>{{domxref("FileReader.readAsBinaryString()")}}</dt>
<dd>Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und, wenn der Lesevorgang abgeschlossen ist, enthält <code><font face="Courier New">result</font></code> die rohen Binär-Daten als String.</dd>
<dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
<dd>Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und, wenn der Lesevorgang abgeschlossen ist, enthält <code><font face="Courier New">result</font></code> die Daten als Data-URL.</dd>
<dt>{{domxref("FileReader.readAsText()")}}</dt>
<dd>Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und , wenn der Lesevorgang abgeschlossen ist, enthält <code><font face="Courier New">result</font></code> die Daten als Text-String.</dd>
</dl>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
<tr>
<td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
<td>{{Spec2("File API")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser-Kompatiblität">Browser-Kompatiblität</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basissupport</td>
<td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
<td>7</td>
<td>10<sup>[2]</sup></td>
<td>12.02<sup>[3]</sup></td>
<td>6.0.2</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basissupport</td>
<td>32</td>
<td>3</td>
<td>10</td>
<td>11.5</td>
<td>6.1</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Vor Gecko 2.0 beta 7 (Firefox 4.0 beta 7), waren alle {{domxref("Blob")}} parameters stattdessen {{domxref("File")}} Parameter; Das wurde aktualisiert um die Spezifikation zu erfüllen. Vor Gecko 13.0 {{geckoRelease("13.0")}} gab die <code>FileReader.error</code> Eigenschaft ein {{domxref("FileError")}} Objekt zurück. Dieses Interface wurde wurde entfernt und <code>FileReader.error</code> gibt nun einen {{domxref("DOMError")}} Objekt zurück, wie in dem aktuellen FileAPI Entwurf vorgesehen.</p>
<p>[2] IE9 hat ein <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
<p>[3] Opera hat <a href="http://www.opera.com/docs/specs/presto28/file/">partiellen Support</a> in 11.1.</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Zugriff_auf_Dateien_von_Webapplikationen">Zugriff auf Dateien von Webapplikationen</a></li>
<li>{{domxref("File")}}</li>
<li>{{domxref("Blob")}}</li>
<li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMFileReader">nsIDOMFileReader</a> - Für addons/privileged scope</li>
</ul>
|
