From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../fr/web/api/filereader/readasdataurl/index.html | 179 +++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 files/fr/web/api/filereader/readasdataurl/index.html (limited to 'files/fr/web/api/filereader/readasdataurl') 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

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