FileReader.readAsDataURL()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La méthode FileReader.readAsDataURL() est utilisée afin de lire le contenu d'un blob (Blob) ou d'un fichier (File). Lorsque l'opération de lecture est terminée, readyState prend la valeur DONE, et l'évènement loadend est déclenché. À partir de ce moment, la propriété result contient les données sous la forme d'une URL de données qui représente les données du fichier sous la forme d'une chaîne de caractères encodée en base64.
Note :
Pour un blob, result ne peut pas être décodé en base64 sans avoir d'abord retiré la déclaration d'URL de données qui précède les données encodées. Pour récupérer uniquement la chaîne encodée en base 64, il faut d'abord supprimer le préfixe data:*/*;base64, du résultat.
Syntaxe
readAsDataURL(blob);
Paramètres
Valeur de retour
Aucune (undefined).
Exemples
Exemple simple
HTML
<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="Prévisualisation de l'image…" />
JavaScript
function previewFile() {
const preview = document.querySelector("img");
const file = document.querySelector("input[type=file]").files[0];
const reader = new FileReader();
reader.addEventListener(
"load",
() => {
// on convertit l'image en une chaîne de caractères base64
preview.src = reader.result;
},
false,
);
if (file) {
reader.readAsDataURL(file);
}
}
Résultat
Lire plusieurs fichiers
HTML
<input id="browse" type="file" onchange="previewFiles()" multiple />
<div id="preview"></div>
JavaScript
function previewFiles() {
const preview = document.querySelector("#preview");
const files = document.querySelector("input[type=file]").files;
function readAndPreview(file) {
// On s'assure que `file.name` termine par
// une des extensions souhaitées
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
const reader = new FileReader();
reader.addEventListener(
"load",
() => {
const image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
preview.appendChild(image);
},
false,
);
reader.readAsDataURL(file);
}
}
if (files) {
Array.prototype.forEach.call(files, readAndPreview);
}
}
Note :
Le constructeur FileReader() n'était pas pris en charge pour les versions d'Internet Explorer antérieures à IE 10. Vous pouvez voir notre exemple de solution compatible entre les navigateurs pour la prévisualisation d'image, ainsi que cet autre exemple encore plus puissant.
Spécifications
| Specification |
|---|
| File API # readAsDataURL |