diff options
Diffstat (limited to 'files/fr/web/api/filereader')
| -rw-r--r-- | files/fr/web/api/filereader/filereader/index.md | 58 | ||||
| -rw-r--r-- | files/fr/web/api/filereader/index.md | 203 | ||||
| -rw-r--r-- | files/fr/web/api/filereader/readasarraybuffer/index.md | 51 | ||||
| -rw-r--r-- | files/fr/web/api/filereader/readasbinarystring/index.md | 63 | ||||
| -rw-r--r-- | files/fr/web/api/filereader/readasdataurl/index.md | 104 | ||||
| -rw-r--r-- | files/fr/web/api/filereader/readastext/index.md | 69 |
6 files changed, 228 insertions, 320 deletions
diff --git a/files/fr/web/api/filereader/filereader/index.md b/files/fr/web/api/filereader/filereader/index.md index 53c3cedb1e..5e13f908c3 100644 --- a/files/fr/web/api/filereader/filereader/index.md +++ b/files/fr/web/api/filereader/filereader/index.md @@ -8,52 +8,40 @@ tags: - Reference translation_of: Web/API/FileReader/FileReader --- -<p><strong><code>FileReader()</code></strong> est un constructeur qui permet de créer un nouvel objet FileReader.</p> +**`FileReader()`** est un constructeur qui permet de créer un nouvel objet FileReader. -<p>Pour plus de details à propos de <code>FileReader</code>, visiter <a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a>.</p> +Pour plus de details à propos de `FileReader`, visiter [Using files from web applications](/en-US/docs/Web/API/File/Using_files_from_web_applications). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var reader = new FileReader();</pre> +```js +var reader = new FileReader(); +``` -<h3 id="Paramèteres">Paramèteres</h3> +### Paramèteres -<p>Aucun.</p> +Aucun. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'extrait de code ci-dessous montre la création d'un objet <code><a href="/en-US/docs/Web/API/FileReader">FileReader</a></code> en utilisant le constructeur <code>FileReader()</code> ainsi qu'une utilisation subséquente de cet objet:</p> +L'extrait de code ci-dessous montre la création d'un objet [`FileReader`](/en-US/docs/Web/API/FileReader) en utilisant le constructeur `FileReader()` ainsi qu'une utilisation subséquente de cet objet: -<pre class="brush: js">function printFile(file) { +```js +function printFile(file) { var reader = new FileReader(); reader.onload = function(evt) { console.log(evt.target.result); }; reader.readAsText(file); } -</pre> - -<h2 id="Caractéristiques">Caractéristiques</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Caractéristique</th> - <th scope="col">Status</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File API')}}</td> - <td>{{Spec2('File API')}}</td> - <td>Définition Initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li> -</ul> +``` + +## Caractéristiques + +| Caractéristique | Status | Commentaire | +| -------------------------------- | ---------------------------- | ------------------- | +| {{SpecName('File API')}} | {{Spec2('File API')}} | Définition Initiale | + +## Voir aussi + +- [Using files from web applications](/en-US/docs/Web/API/File/Using_files_from_web_applications) diff --git a/files/fr/web/api/filereader/index.md b/files/fr/web/api/filereader/index.md index 913886ed27..5457e2427a 100644 --- a/files/fr/web/api/filereader/index.md +++ b/files/fr/web/api/filereader/index.md @@ -8,115 +8,94 @@ tags: - 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>{{Compat("api.FileReader")}}</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> +{{APIRef("File API")}} + +L'objet **`FileReader`** 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). + +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 [`DataTransfer`](/fr/docs/Web/API/DataTransfer) ou grâce à l'API `mozGetAsFile()` API de {{domxref("HTMLCanvasElement")}}. + +{{AvailableInWorkers}} + +## Constructeur + +- {{domxref("FileReader.FileReader", "FileReader()")}} + - : Ce constructeur renvoie un nouvel objet `FileReader`. + +Pour plus d'informations et d'exemples, consulter [utiliser des fichiers depuis des applications web](/fr/docs/Using_files_from_web_applications). + +## Propriétés + +- {{domxref("FileReader.error")}} {{readonlyinline}} + - : Un objet {{domxref("DOMError")}} qui représente l'erreur qui s'est produite lors de la lecture du fichier. +- {{domxref("FileReader.readyState")}} {{readonlyinline}} + + - : Un nombre qui indique l'état du `FileReader`. 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> + +- {{domxref("FileReader.result")}} {{readonlyinline}} + - : 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. + +### Gestionnaire d'évènements + +- {{domxref("FileReader.onabort")}} + - : Un gestionnaire pour l'évènement {{event("abort")}}. Cet évènement est déclenché à chaque fois que l'opération de lecture est interrompue. +- {{domxref("FileReader.onerror")}} + - : 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. +- {{domxref("FileReader.onload")}} + - : 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. +- {{domxref("FileReader.onloadstart")}} + - : Un gestionnaire pour l'évènement {{event("loadstart")}}. Cet évènement est déclenché chaque fois qu'une opération de lecture commence. +- {{domxref("FileReader.onloadend")}} + - : 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). +- {{domxref("FileReader.onprogress")}} + - : Un gestionnaire pour l'évènement {{event("progress")}}. Cet évènement est déclenché lorsque la lecture du {{domxref("Blob")}} est en cours. + +> **Note :** `FileReader` 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")}}. + +## Méthodes + +- {{domxref("FileReader.abort()")}} + - : Cette méthode interrompt l'opération de lecture. Après avoir renvoyé une valeur, l'état `readyState` aura la valeur `DONE`. +- {{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}} + - : Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut `result` contient un objet {{domxref("ArrayBuffer")}} représentant les données du fichier. +- {{domxref("FileReader.readAsBinaryString()")}} {{non-standard_inline}} + - : Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut `result` contient les données binaires brutes sous la forme d'une chaîne de caractères. +- {{domxref("FileReader.readAsDataURL()")}} + - : Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut `result` contient une URL de données qui représente les données du fichier. +- {{domxref("FileReader.readAsText()")}} + - : Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois la lecture terminée, l'attribut `result` contient les données du fichier sous la forme d'une chaîne de caractères. + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName("File API", "#dfn-filereader", "FileReader")}} | {{Spec2("File API")}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.FileReader")}} + +## Voir aussi + +- [Manipuler des fichiers depuis des applications web](/fr/docs/Using_files_from_web_applications) +- {{domxref("File")}} +- {{domxref("Blob")}} diff --git a/files/fr/web/api/filereader/readasarraybuffer/index.md b/files/fr/web/api/filereader/readasarraybuffer/index.md index cba515b488..f0063940c0 100644 --- a/files/fr/web/api/filereader/readasarraybuffer/index.md +++ b/files/fr/web/api/filereader/readasarraybuffer/index.md @@ -8,50 +8,31 @@ tags: - Méthodes translation_of: Web/API/FileReader/readAsArrayBuffer --- -<p>{{APIRef("File API")}}</p> +{{APIRef("File API")}} -<p>La méthode <strong><code>readAsArrayBuffer()</code></strong> de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (<em>fichier</em>). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur <code>"DONE"</code> (<em>terminé</em>) à savoir <code>2</code>, et l'événement {{event("loadend")}} est levé. L'attribut {{domxref("FileReader.result","résultat")}} contient alors les données lues sous la forme d'un objet {{domxref("ArrayBuffer")}}.</p> +La méthode **`readAsArrayBuffer()`** de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (_fichier_). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur `"DONE"` (_terminé_) à savoir `2`, et l'événement {{event("loadend")}} est levé. L'attribut {{domxref("FileReader.result","résultat")}} contient alors les données lues sous la forme d'un objet {{domxref("ArrayBuffer")}}. -<div class="note"> -<p><strong>Note :</strong> La méthode {{domxref("Blob.arrayBuffer()")}} est une nouvelle API basée sur les promesses permettant de lire un fichier.</p> -</div> +> **Note :** La méthode {{domxref("Blob.arrayBuffer()")}} est une nouvelle API basée sur les promesses permettant de lire un fichier. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsArrayBuffer(<em>blob</em>);</pre> + instanceOfFileReader.readAsArrayBuffer(blob); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>blob</code></dt> - <dd>Le {{domxref("Blob")}} ou le {{domxref("File")}} (<em>fichier</em>) devant être lu.</dd> -</dl> +- `blob` + - : Le {{domxref("Blob")}} ou le {{domxref("File")}} (_fichier_) devant être lu. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}</td> - <td>{{Spec2("File API")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}} | {{Spec2("File API")}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.FileReader.readAsArrayBuffer")}}. +## Voir aussi -<p>{{Compat("api.FileReader.readAsArrayBuffer")}}.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("FileReader")}}</li> -</ul> +- {{domxref("FileReader")}} diff --git a/files/fr/web/api/filereader/readasbinarystring/index.md b/files/fr/web/api/filereader/readasbinarystring/index.md index 2155291f2b..418c9f4f88 100644 --- a/files/fr/web/api/filereader/readasbinarystring/index.md +++ b/files/fr/web/api/filereader/readasbinarystring/index.md @@ -3,30 +3,29 @@ title: FileReader.readAsBinaryString() slug: Web/API/FileReader/readAsBinaryString translation_of: Web/API/FileReader/readAsBinaryString --- -<div>{{APIRef("File API")}}</div> +{{APIRef("File API")}} -<p>La méthode <code>readAsArrayBuffer()</code> de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (<em>fichier</em>). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur <code>"DONE"</code> (<em>terminé</em>), et l'événement {{event("loadend")}} est levé.</p> +La méthode `readAsArrayBuffer()` de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (_fichier_). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur `"DONE"` (_terminé_), et l'événement {{event("loadend")}} est levé. -<p>L'attribut {{domxref("FileReader.result","result")}} contient alors les données binaires brutes lues.</p> +L'attribut {{domxref("FileReader.result","result")}} contient alors les données binaires brutes lues. -<p>Notez que cette méthode fût enlevée de l'API, mais réintroduite pour des raison de compatibilité ascendante.</p> +Notez que cette méthode fût enlevée de l'API, mais réintroduite pour des raison de compatibilité ascendante. -<p>L'utilisation de {{domxref("FileReader.readAsArrayBuffer()")}} est recomandée.</p> +L'utilisation de {{domxref("FileReader.readAsArrayBuffer()")}} est recomandée. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsBinaryString(blob);</pre> + instanceOfFileReader.readAsBinaryString(blob); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>blob</code></dt> - <dd>Le {{domxref("Blob")}} or {{domxref("File")}} devant être lu.</dd> -</dl> +- `blob` + - : Le {{domxref("Blob")}} or {{domxref("File")}} devant être lu. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">var canvas = document.createElement('canvas'); +```js +var canvas = document.createElement('canvas'); var height = 200; var width = 200; @@ -48,35 +47,19 @@ canvas.toBlob(function (blob) { } reader.readAsBinaryString(blob); -});</pre> +}); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File API','#readAsBinaryString','readAsBinaryString')}}</td> - <td>{{Spec2('File API')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------- | ---------------------------- | ------- | +| {{SpecName('File API','#readAsBinaryString','readAsBinaryString')}} | {{Spec2('File API')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.FileReader.readAsBinaryString")}} +## See also -<p>{{Compat("api.FileReader.readAsBinaryString")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("FileReader")}}</li> -</ul> +- {{domxref("FileReader")}} diff --git a/files/fr/web/api/filereader/readasdataurl/index.md b/files/fr/web/api/filereader/readasdataurl/index.md index 04dbbd93f1..01642d791a 100644 --- a/files/fr/web/api/filereader/readasdataurl/index.md +++ b/files/fr/web/api/filereader/readasdataurl/index.md @@ -9,31 +9,32 @@ tags: - Reference translation_of: Web/API/FileReader/readAsDataURL --- -<div>{{APIRef("API File")}}</div> +{{APIRef("API File")}} -<p>La méthode <code>readAsDataURL</code> permet de lire le contenu de l’objet {{domxref("Blob")}} ou {{domxref("File")}} spécifié. À la fin de l’opération de lecture, la propriété {{domxref("FileReader.readyState","readyState")}} renvoie l’état <code>DONE</code>, et l’évènement {{event("loadend")}} se déclenche. À ce moment-là, l’attribut {{domxref("FileReader.result","result")}} contient les données dans une URL représentant les données du fichier sous forme de chaîne encodée en base64.</p> +La méthode `readAsDataURL` permet de lire le contenu de l’objet {{domxref("Blob")}} ou {{domxref("File")}} spécifié. À la fin de l’opération de lecture, la propriété {{domxref("FileReader.readyState","readyState")}} renvoie l’état `DONE`, et l’évènement {{event("loadend")}} se déclenche. À ce moment-là, l’attribut {{domxref("FileReader.result","result")}} contient les données dans une URL représentant les données du fichier sous forme de chaîne encodée en base64. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre> + instanceOfFileReader.readAsDataURL(blob); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>blob</code></dt> - <dd>L’argument {{domxref("Blob")}} ou {{domxref("File")}} à partir duquel exécuter la lecture.</dd> -</dl> +- `blob` + - : L’argument {{domxref("Blob")}} ou {{domxref("File")}} à partir duquel exécuter la lecture. -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><input type="file" onchange="previewFile()"><br> -<img src="" height="200" alt="Aperçu de l’image..."></pre> +```html +<input type="file" onchange="previewFile()"><br> +<img src="" height="200" alt="Aperçu de l’image..."> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">function previewFile() { +```js +function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); @@ -45,24 +46,28 @@ translation_of: Web/API/FileReader/readAsDataURL if (file) { reader.readAsDataURL(file); } -}</pre> +} +``` + +### Résultat en direct -<h3 id="Résultat_en_direct">Résultat en direct</h3> +{{EmbedLiveSample("Example", "100%", 240)}} -<p>{{EmbedLiveSample("Example", "100%", 240)}}</p> -<p> </p> -<h2 id="Exemple_de_lecture_de_plusieurs_fichiers">Exemple de lecture de plusieurs fichiers</h2> +## Exemple de lecture de plusieurs fichiers -<h3 id="HTML_2">HTML</h3> +### HTML -<pre class="brush: html"><input id="browse" type="file" onchange="previewFiles()" multiple> -<div id="preview"></div></pre> +```html +<input id="browse" type="file" onchange="previewFiles()" multiple> +<div id="preview"></div> +``` -<h3 id="JavaScript_2">JavaScript</h3> +### JavaScript -<pre class="brush: js">function previewFiles() { +```js +function previewFiles() { var preview = document.querySelector('#preview'); var files = document.querySelector('input[type=file]').files; @@ -91,35 +96,20 @@ translation_of: Web/API/FileReader/readAsDataURL } } -</pre> - -<div class="note"> - <p><strong>Note :</strong> Le constructeur <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> n’est pas pris en charge dans les versions IE antérieures à Internet Explorer 10. Pour un code compatible avec tous les navigateurs, accédez à notre <a href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html">solution d’aperçu d’image multinavigateur</a>. Examinez également cette <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">alternative plus puissante</a>.</p> -</div> - -<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">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("API File", "#FileReader-interface", "FileReader")}}</td> - <td>{{Spec2("API File")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2> - -<p>{{Compat("api.FileReader.readAsDataURL")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("FileReader")}}</li> -</ul> +``` + +> **Note :** Le constructeur [`FileReader()`](/en-US/docs/Web/API/FileReader) n’est pas pris en charge dans les versions IE antérieures à Internet Explorer 10. Pour un code compatible avec tous les navigateurs, accédez à notre [solution d’aperçu d’image multinavigateur](https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html). Examinez également cette [alternative plus puissante](https://mdn.mozillademos.org/files/3698/image_upload_preview.html). + +## Spécifications + +| Spécification | État | Commentaire | +| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | +| {{SpecName("API File", "#FileReader-interface", "FileReader")}} | {{Spec2("API File")}} | Définition initiale | + +## Compatibilité avec les navigateurs + +{{Compat("api.FileReader.readAsDataURL")}} + +## Voir aussi + +- {{domxref("FileReader")}} diff --git a/files/fr/web/api/filereader/readastext/index.md b/files/fr/web/api/filereader/readastext/index.md index cceb86eff2..63833ac3b9 100644 --- a/files/fr/web/api/filereader/readastext/index.md +++ b/files/fr/web/api/filereader/readastext/index.md @@ -9,54 +9,41 @@ tags: - Reference translation_of: Web/API/FileReader/readAsText --- -<div>{{APIRef("File API")}}</div> +{{APIRef("File API")}} -<p>La méthode <code>readAsText</code> est utilisée pour lire le contenu du {{domxref("Blob")}} ou {{domxref("File")}} spécifié en paramètre. Lorsque la lecture est terminée, l'état {{domxref("FileReader.readyState","readyState")}} passe à <code>DONE</code>, l'événement {{event("loadend")}} est lancé, et l'attribut {{domxref("FileReader.result","result")}} contient le contenu du fichier sous forme de chaîne de caractères.</p> +La méthode `readAsText` est utilisée pour lire le contenu du {{domxref("Blob")}} ou {{domxref("File")}} spécifié en paramètre. Lorsque la lecture est terminée, l'état {{domxref("FileReader.readyState","readyState")}} passe à `DONE`, l'événement {{event("loadend")}} est lancé, et l'attribut {{domxref("FileReader.result","result")}} contient le contenu du fichier sous forme de chaîne de caractères. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsText(blob[, encoding]);</pre> + instanceOfFileReader.readAsText(blob[, encoding]); -<h3 id="Parameters">Parameters</h3> +### Parameters -<dl> - <dt><code>blob</code></dt> - <dd>Le {{domxref("Blob")}} ou {{domxref("File")}} qui doit être lu.</dd> - <dt>encoding {{optional_inline}}</dt> - <dd>Une chaîne de caractères spécifiant l'encodage utilisé dans les données de retour. Par défaut, UTF-8 est utilisé lorsque le paramètre n'est pas spécifié.</dd> -</dl> +- `blob` + - : Le {{domxref("Blob")}} ou {{domxref("File")}} qui doit être lu. +- encoding {{optional_inline}} + - : Une chaîne de caractères spécifiant l'encodage utilisé dans les données de retour. Par défaut, UTF-8 est utilisé lorsque le paramètre n'est pas spécifié. -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">var selectedFile = document.getElementById('input').files[0]; +```js +var selectedFile = document.getElementById('input').files[0]; var content = document.getElementById('content'); var reader = new FileReader(); reader.onload = function(event) { content.innerHTML = reader.result; }; -reader.readAsText(selectedFile);</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td> - <td>{{Spec2("File API")}}</td> - <td>Définition initale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.FileReader.readAsText")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("FileReader")}}</li> -</ul> +reader.readAsText(selectedFile); +``` + +## Spécifications + +| Specification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------ | +| {{SpecName("File API", "#FileReader-interface", "FileReader")}} | {{Spec2("File API")}} | Définition initale | + +## Compatibilité des navigateurs + +{{Compat("api.FileReader.readAsText")}} + +## Voir aussi + +- {{domxref("FileReader")}} |