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
|
---
title: FileReader
slug: Web/API/FileReader
tags:
- API
- File API
- Files
- Interface
- NeedsTranslation
- Reference
- TopicStub
translation_of: Web/API/FileReader
---
<div>{{APIRef("File API")}}</div>
<p>Objektet <code>FileReader</code> låter webbapplikationer asynkroniserat läsa innehåll i filer sparade på användarens dator. Man använder objekten {{domxref("File")}} eller {{domxref("Blob")}} för att specificera filerna eller datan som ska läsas.</p>
<p>Objekt av typen File kan man få av från ett FileList-objekt till följd av att användaren har valt en fil med {{HTMLElement("input")}}, en <em>drag-och-släpp-operations</em> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer">DataTransfer</a>-objekt</code>, eller från API:et <code>mozGetAsFile()</code> på ett {{domxref("HTMLCanvasElement")}}.</p>
<p>{{AvailableInWorkers}}</p>
<h2 id="Konstruktor">Konstruktor</h2>
<dl>
<dt>{{domxref("FileReader.FileReader", "FileReader()")}}</dt>
<dd>Returnerar en nykonstruerad <code>FileReader</code>.</dd>
</dl>
<p>Se <a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> för detaljer och exempel (på engelska).</p>
<h2 id="Egenskaper">Egenskaper</h2>
<dl>
<dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
<dd>Ett {{domxref("DOMException")}} som representerar ett fel som uppstod vid inläsning av filen.</dd>
<dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
<dd>Ett nummer som indikerar vilket stadie FileReader-objektet är i. Följande värden finns:
<table class="standard-table">
<tbody>
<tr>
<td><code>EMPTY</code></td>
<td><code>0</code></td>
<td>Ingen data har laddats ännu.</td>
</tr>
<tr>
<td><code>LOADING</code></td>
<td><code>1</code></td>
<td>Datan laddas just nu.</td>
</tr>
<tr>
<td><code>DONE</code></td>
<td><code>2</code></td>
<td>Hela läsförfrågningen är klar.</td>
</tr>
</tbody>
</table>
</dd>
<dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
<dd>Filens innehåll. Denna egenskap är endast giltlig när operationen är färdig. Formatet på datan beror på vilken metod som användes för att initiera läsoperationen.</dd>
</dl>
<h3 id="Händelsehanterare">Händelsehanterare</h3>
<dl>
<dt>{{domxref("FileReader.onabort")}}</dt>
<dd>Hanterar händelsen {{event("abort")}}. Denna händelse aktiveras varje gång läsoperationen avbryts.</dd>
<dt>{{domxref("FileReader.onerror")}}</dt>
<dd>A handler for the {{event("error")}} event. This event is triggered each time the reading operation encounter an error.</dd>
<dt>{{domxref("FileReader.onload")}}</dt>
<dd>A handler for the {{event("load")}} event. This event is triggered each time the reading operation is successfully completed.</dd>
<dt>{{domxref("FileReader.onloadstart")}}</dt>
<dd>A handler for the {{event("loadstart")}} event. This event is triggered each time the reading is starting.</dd>
<dt>{{domxref("FileReader.onloadend")}}</dt>
<dd>A handler for the {{event("loadend")}} event. This event is triggered each time the reading operation is completed (either in success or failure).</dd>
<dt>{{domxref("FileReader.onprogress")}}</dt>
<dd>A handler for the {{event("progress")}} event. This event is triggered while reading a {{domxref("Blob")}} content.</dd>
</dl>
<div class="note">
<p>As <code>FileReader</code> inherits from {{domxref("EventTarget")}}, all those events can also be listened for by using the {{domxref("EventTarget.addEventListener()","addEventListener")}} method.</p>
</div>
<h2 id="Methods">Methods</h2>
<dl>
<dt>{{domxref("FileReader.abort()")}}</dt>
<dd>Aborts the read operation. Upon return, the <code>readyState</code> will be <code>DONE</code>.</dd>
<dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}</dt>
<dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains an {{domxref("ArrayBuffer")}} representing the file's data.</dd>
<dt>{{domxref("FileReader.readAsBinaryString()")}}</dt>
<dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains the raw binary data from the file as a string.</dd>
<dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
<dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains a <code>data:</code> URL representing the file's data.</dd>
<dt>{{domxref("FileReader.readAsText()")}}</dt>
<dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains the contents of the file as a text string.</dd>
</dl>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName("File API", "#dfn-filereader", "FileReader")}}</td>
<td>{{Spec2("File API")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.FileReader")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a></li>
<li>{{domxref("File")}}</li>
<li>{{domxref("Blob")}}</li>
</ul>
|
