---
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>