From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/api/filereader/filereader/index.html | 59 +++++++ files/fr/web/api/filereader/index.html | 196 +++++++++++++++++++++ .../api/filereader/readasarraybuffer/index.html | 58 ++++++ .../api/filereader/readasbinarystring/index.html | 82 +++++++++ .../fr/web/api/filereader/readasdataurl/index.html | 179 +++++++++++++++++++ files/fr/web/api/filereader/readastext/index.html | 118 +++++++++++++ 6 files changed, 692 insertions(+) create mode 100644 files/fr/web/api/filereader/filereader/index.html create mode 100644 files/fr/web/api/filereader/index.html create mode 100644 files/fr/web/api/filereader/readasarraybuffer/index.html create mode 100644 files/fr/web/api/filereader/readasbinarystring/index.html create mode 100644 files/fr/web/api/filereader/readasdataurl/index.html create mode 100644 files/fr/web/api/filereader/readastext/index.html (limited to 'files/fr/web/api/filereader') diff --git a/files/fr/web/api/filereader/filereader/index.html b/files/fr/web/api/filereader/filereader/index.html new file mode 100644 index 0000000000..53c3cedb1e --- /dev/null +++ b/files/fr/web/api/filereader/filereader/index.html @@ -0,0 +1,59 @@ +--- +title: FileReader() +slug: Web/API/FileReader/FileReader +tags: + - API + - Constructeur + - FileReader + - Reference +translation_of: Web/API/FileReader/FileReader +--- +

FileReader()  est un constructeur qui permet de créer un nouvel objet FileReader.

+ +

Pour plus de details à propos de FileReader, visiter Using files from web applications.

+ +

Syntaxe

+ +
var reader = new FileReader();
+ +

Paramèteres

+ +

Aucun.

+ +

Exemple

+ +

L'extrait de code ci-dessous montre la création d'un objet FileReader en utilisant le constructeur FileReader()  ainsi qu'une utilisation subséquente de cet objet:

+ +
function printFile(file) {
+  var reader = new FileReader();
+  reader.onload = function(evt) {
+    console.log(evt.target.result);
+  };
+  reader.readAsText(file);
+}
+
+ +

Caractéristiques

+ + + + + + + + + + + + + + + + +
CaractéristiqueStatusCommentaire
{{SpecName('File API')}}{{Spec2('File API')}}Définition Initiale
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/filereader/index.html b/files/fr/web/api/filereader/index.html new file mode 100644 index 0000000000..15696cfe7a --- /dev/null +++ b/files/fr/web/api/filereader/index.html @@ -0,0 +1,196 @@ +--- +title: FileReader +slug: Web/API/FileReader +tags: + - API + - File + - Interface + - Référence(2) +translation_of: Web/API/FileReader +--- +
{{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 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.

+ +

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 : + + + + + + + + + + + + + + + + + + +
EMPTY0Aucune donnée n'a encore été chargée.
LOADING1Des données sont en cours de chargement.
DONE2La demande de lecture est complètement terminée.
+
+
{{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ÉtatCommentaires
{{SpecName("File API", "#dfn-filereader", "FileReader")}}{{Spec2("File API")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Support simple{{CompatGeckoDesktop("1.9.2")}}[1]7{{CompatVersionUnknown}}10[2]12.02[3]6.0
Disponible dans les web workers{{CompatGeckoDesktop(46)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidEdgeIE MobileOpera MobileSafari Mobile
Support simple323{{CompatVersionUnknown}}1011.56.1
Disponible dans les web workers{{CompatGeckoDesktop(46)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +

[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é FileReader.error était un objet {{domxref("FileError")}}. Cette interface a été supprimée et FileReader.error correspond désormais à un objet {{domxref("DOMError")}} tel que défini dans le dernier brouillon de spécification de l'API FileAPI.

+ +

[2] IE9 dispose d'un Lab File API.

+ +

[3] Opera implémente partiellement cette fonctionnalité dans la version 11.1.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/filereader/readasarraybuffer/index.html b/files/fr/web/api/filereader/readasarraybuffer/index.html new file mode 100644 index 0000000000..6746cc3594 --- /dev/null +++ b/files/fr/web/api/filereader/readasarraybuffer/index.html @@ -0,0 +1,58 @@ +--- +title: FileReader.readAsArrayBuffer() +slug: Web/API/FileReader/readAsArrayBuffer +tags: + - API + - DOM + - Fichier + - Méthodes +translation_of: Web/API/FileReader/readAsArrayBuffer +--- +

{{APIRef("File API")}}

+ +

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")}}.

+ +
+

Nouvelle API disponible
+ La méthode {{domxref("Blob.arrayBuffer()")}} est une nouvelle API basée sur les promesses permettant de lire un fichier.

+
+ +

Syntaxe

+ +
instanceOfFileReader.readAsArrayBuffer(blob);
+ +

Paramètres

+ +
+
blob
+
Le {{domxref("Blob")}} ou le {{domxref("File")}} (fichier) devant être lu.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}{{Spec2("File API")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FileReader.readAsArrayBuffer")}}.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/filereader/readasbinarystring/index.html b/files/fr/web/api/filereader/readasbinarystring/index.html new file mode 100644 index 0000000000..0cd282ac6b --- /dev/null +++ b/files/fr/web/api/filereader/readasbinarystring/index.html @@ -0,0 +1,82 @@ +--- +title: FileReader.readAsBinaryString() +slug: Web/API/FileReader/readAsBinaryString +translation_of: Web/API/FileReader/readAsBinaryString +--- +
{{APIRef("File API")}}
+ +

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

+ +

L'attribut {{domxref("FileReader.result","result")}} contient alors les données binaires brutes lues.

+ +

Notez que cette méthode fût enlevée de l'API, mais réintroduite pour des raison de compatibilité ascendante.

+ +

L'utilisation de {{domxref("FileReader.readAsArrayBuffer()")}} est recomandée.

+ +

Syntaxe

+ +
instanceOfFileReader.readAsBinaryString(blob);
+ +

Paramètres

+ +
+
blob
+
Le {{domxref("Blob")}} or {{domxref("File")}} devant être lu.
+
+ +

Exemple

+ +
var canvas = document.createElement('canvas');
+var height = 200;
+var width  = 200;
+
+canvas.width  = width;
+canvas.height = height;
+
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = '#090';
+ctx.beginPath();
+ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
+ctx.stroke();
+
+canvas.toBlob(function (blob) {
+  var reader = new FileReader();
+
+  reader.onload = function () {
+    console.log(reader.result);
+  }
+
+  reader.readAsBinaryString(blob);
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API','#readAsBinaryString','readAsBinaryString')}}{{Spec2('File API')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FileReader.readAsBinaryString")}}

+ +

See also

+ + diff --git a/files/fr/web/api/filereader/readasdataurl/index.html b/files/fr/web/api/filereader/readasdataurl/index.html new file mode 100644 index 0000000000..6da9a22250 --- /dev/null +++ b/files/fr/web/api/filereader/readasdataurl/index.html @@ -0,0 +1,179 @@ +--- +title: FileReader.readAsDataURL() +slug: Web/API/FileReader/readAsDataURL +tags: + - API + - API File + - Fichiers + - Méthode + - Reference +translation_of: Web/API/FileReader/readAsDataURL +--- +
{{APIRef("API File")}}
+ +

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.

+ +

Syntaxe

+ +
instanceOfFileReader.readAsDataURL(blob);
+ +

Paramètres

+ +
+
blob
+
L’argument {{domxref("Blob")}} ou {{domxref("File")}} à partir duquel exécuter la lecture.
+
+ +

Exemple

+ +

HTML

+ +
<input type="file" onchange="previewFile()"><br>
+<img src="" height="200" alt="Aperçu de l’image...">
+ +

JavaScript

+ +
function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.addEventListener("load", function () {
+    preview.src = reader.result;
+  }, false);
+
+  if (file) {
+    reader.readAsDataURL(file);
+  }
+}
+ +

Résultat en direct

+ +

{{EmbedLiveSample("Example", "100%", 240)}}

+ +

 

+ +

Exemple de lecture de plusieurs fichiers

+ +

HTML

+ +
<input id="browse" type="file" onchange="previewFiles()" multiple>
+<div id="preview"></div>
+ +

JavaScript

+ +
function previewFiles() {
+
+  var preview = document.querySelector('#preview');
+  var files   = document.querySelector('input[type=file]').files;
+
+  function readAndPreview(file) {
+
+    // Veillez à ce que `file.name` corresponde à nos critères d’extension
+    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
+      var reader = new FileReader();
+
+      reader.addEventListener("load", function () {
+        var image = new Image();
+        image.height = 100;
+        image.title = file.name;
+        image.src = this.result;
+        preview.appendChild( image );
+      }, false);
+
+      reader.readAsDataURL(file);
+    }
+
+  }
+
+  if (files) {
+    [].forEach.call(files, readAndPreview);
+  }
+
+}
+
+ +
Remarque : le constructeur 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. Examinez également cette alternative plus puissante.
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName("API File", "#FileReader-interface", "FileReader")}}{{Spec2("API File")}}Définition initiale
+ +

Compatibilité avec les navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Support de base{{CompatGeckoDesktop("1.9.2")}}[1]7{{CompatVersionUnknown}}10[2]12.02[3]6.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidEdgeIE MobileOpera MobileSafari Mobile
Support de base323{{CompatVersionUnknown}}1011.56.0
+
+ +

[1] Avant la version Gecko 2.0 beta 7 (Firefox 4.0 beta 7), tous les paramètres {{domxref("Blob")}} ci-dessous étaient des paramètres {{domxref("File")}}. Depuis, une mise à jour a été effectuée pour la prise en charge correcte de cette spécification. Avant la version Gecko 13.0 {{geckoRelease("13.0")}} la propriété FileReader.error renvoyait un objet {{domxref("FileError")}}. Cette interface a été supprimée et le paramètre FileReader.error renvoie désormais l’objet {{domxref("DOMError")}} tel que défini dans la version API File la plus récente.

+ +

[2] IE9 intègre un File API Lab.

+ +

[3] Opera inclut un support partiel dans la version 11.1.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/filereader/readastext/index.html b/files/fr/web/api/filereader/readastext/index.html new file mode 100644 index 0000000000..bbf8372844 --- /dev/null +++ b/files/fr/web/api/filereader/readastext/index.html @@ -0,0 +1,118 @@ +--- +title: FileReader.readAsText() +slug: Web/API/FileReader/readAsText +tags: + - API + - File API + - Files + - Method + - Reference +translation_of: Web/API/FileReader/readAsText +--- +
{{APIRef("File API")}}
+ +

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.

+ +

Syntaxe

+ +
instanceOfFileReader.readAsText(blob[, encoding]);
+ +

Parameters

+ +
+
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é.
+
+ +

Exemples

+ +
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);
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationÉtatCommentaires
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Définition initale
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Support simple{{CompatGeckoDesktop("1.9.2")}}[1]7{{CompatVersionUnknown}}10[2]12.02[3]6.0.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox Mobile (Gecko)AndroidEdgeIE MobileOpera MobileSafari Mobile
Support simple323{{CompatVersionUnknown}}1011.56.1
+
+ +

[1] Avant Gecko 2.0 beta 7 (Firefox 4.0 beta 7), tous les paramètres {{domxref("Blob")}} ci-dessous étaient des paramètres {{domxref("File")}} ; ceci a depuis été mis à jour pour être conforme à la spécification. Avant Gecko 13.0 {{geckoRelease("13.0")}}, la propriété FileReader.error renvoyait un objet {{domxref("FileError")}}. Cette interface a été supprimée et FileReader.error renvoie maintenant l'objet {{domxref("DOMError")}} tel que défini dans le dernier brouillon FileAPI.

+ +

[2] IE9 intègre un File API Lab.

+ +

[3] Opera inclut un support partiel dans la version 11.1.

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf