---
title: FileReader
slug: Web/API/FileReader
tags:
  - API
  - File
  - Interface
  - Référence(2)
translation_of: Web/API/FileReader
---
<div>{{APIRef("File API")}}</div>

<p>L'objet <strong><code>FileReader</code></strong> permet à des applications web de lire le contenu de fichiers (ou de tampons de mémoire brute) de façon asynchrone. On peut ainsi lire le contenu des objets {{domxref("File")}} ou {{domxref("Blob")}} (qui représentent respectivement un fichier ou des données).</p>

<p>Les objets qui sont des fichiers peuvent être obtenus à partir d'un objet {{domxref("FileList")}}, renvoyé lorsque l'utilisateur sélectionne des fichiers grâce à un élément {{HTMLElement("input")}}, via un glisser-déposer avec un objet <a href="/fr/docs/Web/API/DataTransfer"><code>DataTransfer</code></a> ou grâce à l'API <code>mozGetAsFile()</code> API de {{domxref("HTMLCanvasElement")}}.</p>

<p>{{AvailableInWorkers}}</p>

<h2 id="Constructeur">Constructeur</h2>

<dl>
 <dt>{{domxref("FileReader.FileReader", "FileReader()")}}</dt>
 <dd>Ce constructeur renvoie un nouvel objet <code>FileReader</code>.</dd>
</dl>

<p>Pour plus d'informations et d'exemples, consulter <a href="/fr/docs/Using_files_from_web_applications">utiliser des fichiers depuis des applications web</a>.</p>

<h2 id="Propriétés">Propriétés</h2>

<dl>
 <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
 <dd>Un objet {{domxref("DOMError")}} qui représente l'erreur qui s'est produite lors de la lecture du fichier.</dd>
 <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
 <dd>Un nombre qui indique l'état du <code>FileReader</code>. Cette valeur est l'une des suivantes :
 <table class="standard-table">
  <tbody>
   <tr>
    <td><code>EMPTY</code></td>
    <td><code>0</code></td>
    <td>Aucune donnée n'a encore été chargée.</td>
   </tr>
   <tr>
    <td><code>LOADING</code></td>
    <td><code>1</code></td>
    <td>Des données sont en cours de chargement.</td>
   </tr>
   <tr>
    <td><code>DONE</code></td>
    <td><code>2</code></td>
    <td>La demande de lecture est complètement terminée.</td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
 <dd>Le contenu du fichier. Cette propriété est uniquement valide lorsque l'opération de lecture est terminée et le format des données dépend de la méthode utilisée pour l'opération de lecture.</dd>
</dl>

<h3 id="Gestionnaire_d'évènements">Gestionnaire d'évènements</h3>

<dl>
 <dt>{{domxref("FileReader.onabort")}}</dt>
 <dd>Un gestionnaire pour l'évènement {{event("abort")}}. Cet évènement est déclenché à chaque fois que l'opération de lecture est interrompue.</dd>
 <dt>{{domxref("FileReader.onerror")}}</dt>
 <dd>Un gestionnaire pour l'évènement {{event("error")}}. Cet évènement est déclenché à chaque fois qu'il y a une erreur pendant l'opération de lecture.</dd>
 <dt>{{domxref("FileReader.onload")}}</dt>
 <dd>Un gestionnaire pour l'évènement {{event("load")}}. Cet évènement est déclenché à chaque fois qu'une opération de lecture est menée à bien.</dd>
 <dt>{{domxref("FileReader.onloadstart")}}</dt>
 <dd>Un gestionnaire pour l'évènement {{event("loadstart")}}. Cet évènement est déclenché chaque fois qu'une opération de lecture commence.</dd>
 <dt>{{domxref("FileReader.onloadend")}}</dt>
 <dd>Un gestionnaire pour l'évènement {{event("loadend")}}. Cet évènement est déclenché chaque fois qu'une opération de lecture est terminée (que ce soit un succès ou un échec).</dd>
 <dt>{{domxref("FileReader.onprogress")}}</dt>
 <dd>Un gestionnaire pour l'évènement {{event("progress")}}. Cet évènement est déclenché lorsque la lecture du {{domxref("Blob")}} est en cours.</dd>
</dl>

<div class="note">
<p><strong>Note :</strong> <code>FileReader</code> hérite de l'interface {{domxref("EventTarget")}} et tout ces évènements peuvent donc être « écoutés » grâce à la méthode {{domxref("EventTarget.addEventListener()","addEventListener")}}.</p>
</div>

<h2 id="Méthodes">Méthodes</h2>

<dl>
 <dt>{{domxref("FileReader.abort()")}}</dt>
 <dd>Cette méthode interrompt l'opération de lecture. Après avoir renvoyé une valeur, l'état <code>readyState</code> aura la valeur <code>DONE</code>.</dd>
 <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}</dt>
 <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut <code>result</code> contient un objet {{domxref("ArrayBuffer")}} représentant les données du fichier.</dd>
 <dt>{{domxref("FileReader.readAsBinaryString()")}} {{non-standard_inline}}</dt>
 <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut <code>result</code> contient les données binaires brutes sous la forme d'une chaîne de caractères.</dd>
 <dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
 <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut <code>result</code> contient une URL de données qui représente les données du fichier.</dd>
 <dt>{{domxref("FileReader.readAsText()")}}</dt>
 <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois la lecture terminée, l'attribut <code>result</code> contient les données du fichier sous la forme d'une chaîne de caractères.</dd>
</dl>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
  <tr>
   <td>{{SpecName("File API", "#dfn-filereader", "FileReader")}}</td>
   <td>{{Spec2("File API")}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
   <td>7</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>10<sup>[2]</sup></td>
   <td>12.02<sup>[3]</sup></td>
   <td>6.0</td>
  </tr>
  <tr>
   <td>Disponible dans les <em>web workers</em></td>
   <td>{{CompatGeckoDesktop(46)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</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>Edge</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>32</td>
   <td>3</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>10</td>
   <td>11.5</td>
   <td>6.1</td>
  </tr>
  <tr>
   <td>Disponible dans les <em>web workers</em></td>
   <td>{{CompatGeckoDesktop(46)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Avant Gecko 2.0 beta 7 (Firefox 4.0 beta 7), tous les paramètres {{domxref("Blob")}} étaient considérés comme des paramètres {{domxref("File")}}. Cela a été mis à jour afin de correspondre à la spécification. Avant Gecko 13.0 {{geckoRelease("13.0")}}, la propriété <code>FileReader.error</code> était un objet {{domxref("FileError")}}. Cette interface a été supprimée et <code>FileReader.error</code> correspond désormais à un objet {{domxref("DOMError")}} tel que défini dans le dernier brouillon de spécification de l'API <code>FileAPI</code>.</p>

<p>[2] IE9 dispose d'un <a href="https://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">Lab File API</a>.</p>

<p>[3] Opera <a href="https://www.opera.com/docs/specs/presto28/file/">implémente partiellement cette fonctionnalité</a> dans la version 11.1.</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Using_files_from_web_applications">Manipuler des fichiers depuis des applications web</a></li>
 <li>{{domxref("File")}}</li>
 <li>{{domxref("Blob")}}</li>
</ul>