La méthode readAsDataURL permet de lire le contenu de l’objet Blob ou File spécifié. À la fin de l’opération de lecture, la propriété readyState renvoie l’état DONE, et l’évènement loadend se déclenche. À ce moment-là, l’attribut 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
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
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);
}
}
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 | État | Commentaire |
|---|---|---|
| Unknown La définition de 'FileReader' dans cette spécification. |
Statut inconnu | Définition initiale |
Compatibilité avec les navigateurs
Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !
| Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support de base | 3.6 (1.9.2)[1] | 7 | (Oui) | 10[2] | 12.02[3] | 6.0 |
| Feature | Firefox Mobile (Gecko) | Android | Edge | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support de base | 32 | 3 | (Oui) | 10 | 11.5 | 6.0 |
[1] Avant la version Gecko 2.0 beta 7 (Firefox 4.0 beta 7), tous les paramètres Blob ci-dessous étaient des paramètres 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 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) la propriété FileReader.error renvoyait un objet FileError. Cette interface a été supprimée et le paramètre FileReader.error renvoie désormais l’objet 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.