MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

Un objet Blob représente un objet, semblable à un fichier, qui est immuable et qui contient des données brutes. Les blobs (pour Binary Large Objects) représentent des données qui ne sont pas dans un format JavaScript natif. L'interface File est basée sur l'interface Blob et hérite des fonctionnalités de cette dernière tout en ajoutant des fonctionnalités pour gérer les fichiers sur le système de l'utilisateur.

Pour construire un Blob à partir d'objets qui ne sont pas des blobs ou à partir d'autres données, on pourra utiliser le constructeur Blob(). Pour créer un blob qui contient un sous-ensemble d'un autre blob, on pourra employer la méthode slice(). Pour obtenir un Blob à partir d'un fichier du système de l'utilisateur, consulter la documentation File.

Les API qui acceptent des objets Blob sont également listées sur la documentation de File.

Note : La méthode slice() utilisait auparavant un deuxième argument qui indiquait le nombre d'octets à copier dans le nouveau blob. Si on utilisait un couple de valeur début + longueur qui dépassait la taille du blob source, le blob qui était renvoyé contenait les données à partir de l'indice de début et jusuq'à la fin du blob.

Note : La méthode slice() doit être utilisée avec certains préfixes sur certaines versions de navigateurs : blob.mozSlice() pour Firefox 12 et antérieur, blob.webkitSlice() dans Safari. Un ancienne version de slice() sans préfixes avait une sémantique différente et est désormais obsolète. La prise en charge de blob.mozSlice() a été abandonnée avec Firefox 30.

Constructeur

Blob(blobParts[, options])
Ce constructeur renvoie un nouvel objet Blob qui contient la concaténation des valeurs du tableau passé en paramètre.

Propriétés

Blob.isClosed Lecture seule
Un booléen qui indique si la méthode Blob.close() a été appelée sur le blob. Les blobs qui ont été fermés ne peuvent pas être lus.
Blob.size Lecture seule
La taille des données contenues dans l'objet Blob, exprimée en octets.
Blob.type Lecture seule
Une chaîne de caractères qui indique le type MIME des données contenues dans le Blob. Si le type est inconnu, la chaîne de caractères est vide.

Méthodes

Blob.close()
Cette méthode clotûre le blob et libère éventuellement les ressources sous-jacentes.
Blob.slice([début[, fin[, contentType]]])
Cette méthode renvoie un nouvel objet Blob qui contient les données dans le fragment du Blob source entre début et fin.

Exemples

Utilisation du constructeur Blob

Le constructeur Blob() permet de créer des blobs à partir d'autres objets. Par exemple, on peut construire un blob à partir d'une chaîne de caractères :

var debug = {coucou: "monde"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

Créer une URL de données vers un tableau typé

var typedArray = GetTheTypedArraySomehow();

// On ajoute un type MIME pertinent
var blob = new Blob([typedArray], {type: 'application/octet-binary'}); 
var url = URL.createObjectURL(blob);

// url ressemblera à :
//   blob:d3958f5c-0777-0845-9dcf-2cb28783acaf

// désormais on peut utiliser l'URL dans tout
// contexte qui utilise des URL (img.src par
// exemple)

Extraire des données à partir d'un blob

La seule façon de lire le contenu d'un blob est d'utiliser un objet FileReader. Dans le code qui suit, on lit le contenu d'un blob sous la forme d'un tableau typé.

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result contient le contenu du
   // blob sous la forme d'un tableau typé
});
reader.readAsArrayBuffer(blob);

En utilisant d'autres méthodes de FileReader, on peut lire le contenu du blob si c'est une chaîne ou une URL de données.

Spécifications

Spécification État Commentaires
File API
La définition de 'Blob' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 5[1] (Oui) 4[2] 10 11.10[1] 5.1[1]
slice() 10 webkit
21
(Oui) 5 moz[3]
13
10 12 5.1 webkit
Constructeur Blob() 20 (Oui) 13.0 (13.0) 10 12.10 6
close() et isClosed ? Pas de support Pas de support[4] ? ? ?
Fonctionnalité Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? (Oui) 13.0 (13.0) ? ? ?
slice() ? (Oui) ? ? ? ?
Constructeur Blob() ? (Oui) ? ? ? ?
close() et isClosed ? Pas de support Pas de support[4] ? ? ?

[1] La version de slice() qui prend en compte la longueur comme deuxième argument a été implémentée dans WebKit et Opera 11.10. Cependant, cette syntaxe était différente de celle de Array.slice() et de String.slice(), WebKit ra arrêté de supporter cette syntaxe et a ajouté la prise en charge de la nouvelle syntaxe dans Blob.webkitSlice().

[2] Une version de slice() qui prenait une longueur en deuxième argument était implémentée dans Firefox 4. Cependant, cette syntaxe était différente de celle de Array.slice() et de String.slice(), Gecko a arrêté de supporter cette syntaxe et a ajouté la prise en charge de la nouvelle syntaxe dans mozSlice().

[3] Avant Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), un bug impactait slice(); les paramètres start et end étaient mal gérés lorsqu'ils étaient en dehors de l'intervalle des valeurs qui peuvent être représentés sur 64 bits, signés. Cela a désormais été corrigé (prise en charge des valeurs non-signées sur 64 bits).

[4] Cf. bug 1048325

Notes de compatibilité pour Gecko : accéder à cette fonctionnalité dans du code privilégié

Pour utiliser cette fonctionnalité dans du chrome, JSM ou Bootstrap, il faudra l'importer de cette façon :

Cu.importGlobalProperties(['Blob']);

Blob est disponible dans les portées des workers.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : petosorus, SphinxKnight, ChristopheBoucaut, emersion, mekal, teoli, bfn, dexterneo
 Dernière mise à jour par : petosorus,