Blob

Un objet Blob représente un objet-fichier d'immuables, données brutes. Les blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L'interface File est basée sur Blob, héritant des fonctionnalités de Blob et les étend pour supporter les fichiers sur le système de l'utilisateur.

Un moyen facile de construire un Blob est en invoquant le constructeur Blob. Une autre façon consiste à utiliser la méthode slice() pour créer un blob qui contient un sous-ensemble des données d'un autre blob.

Propriétés

Constructeur

Blob Blob(
  [optional] Array parts,
  [optional] BlobPropertyBag properties
);

Paramètres

parts

Un tableau d'objets de données à mettre dans le nouvel objet Blob. Cela peut être n'importe quel nombre de ArrayBuffer, ArrayBufferView (tableau typé), Blob ou DOMString objets, dans n'importe quel ordre.

properties

Un objet qui fournit des propriétés pour le nouveau Blob. Voir la section BlobPropertyBag.

Méthodes

slice()

Retourne un nouvel objet Blob contenant les données dans l'intervalle spécifié d'octets du Blob source.

Blob slice(
  optional long long start,
  optional long long end,
  optional DOMString contentType
};

Paramètres

start Facultatif

Un index dans le Blob indique le premier octet à copier dans le nouveau Blob. Si vous spécifiez une valeur négative, elle est traitée comme un décalage à partir de la fin de la chaîne vers le début. Par exemple, -10 serait le 10e depuis le dernier octet dans le Blob. La valeur par défaut est 0.

end Facultatif

Un index dans le Blob indiquant le dernier octet de copier dans le nouveau Blob. Si vous spécifiez une valeur négative, elle est traitée comme un décalage à partir de la fin de la chaîne vers le début. Par exemple, -10 serait le 10e depuis le dernier octet dans le Blob. La valeur par défaut est size.

contentType Facultatif

Le type de contenu à attribuer à la nouvelle Blob, ce sera la valeur de sa propriété type. La valeur par défaut est une chaîne vide.

Valeur retournée

Un nouvel objet Blob contenant les données spécifiées du Blob source.

Notes

Si vous spécifiez une valeur de start qui est plus grande que la taille du Blob source, le Blob retourné a la taille 0 et ne contient aucune donnée.

BlobPropertyBag

Un objet qui contient deux membres: le type et les endings.

type

Correspond à la propriété type.

endings

Correspond au paramètre endings de {{domxref("BlobBuilder", "BlobBuilder", "append()")}}. Cela peut être soit «transparent» ou «natif».

Exemple d'usage du constructeur Blob

Le code suivant:

var aFileParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"];
var oMyBlob = new Blob(aFileParts, { "type" : "text\/xml" }); // the blob

est équivalent à:

var oBuilder = new BlobBuilder();
var aFileParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"];
oBuilder.append(aFileParts[0]);
var oMyBlob = oBuilder.getBlob("text\/xml"); // the blob

Correspond au paramètre endings de BlobBuilder.append(). Cela peut être soit «transparent» ou «natif».

Exemple de création d'une URL à un tableau typé en utilisant un blob

Le code suivant:

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: "application/octet-binary"}); // pass a useful mime type here
var url = URL.createObjectURL(blob);
// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.

Exemple pour extraire des données d'un Blob

La seule façon de lire le contenu d'un Blob est d'utiliser un FileReader. Le code suivant lit le contenu d'un blob comme un tableau typé.

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);

En utilisant d'autres méthodes de FileReader, il est possible de lire le contenu du Blob comme une chaîne ou une URL de données.

Compatibilité des navigateurs

Notes sur l'implémentation du slice()

La méthode slice() avait initialement pris length comme deuxième argument pour indiquer le nombre d'octets à copier dans le nouveau Blob. Si vous avez spécifié des valeurs telles que start + longueur qui dépassent la taille du Blob source, le Blob retourné contient des données de l'indice de début à la fin du Blob source.

Cette version de slice() a été mis en œuvre dans Firefox 4, WebKit et Opera 11.10. Toutefois, étant donné que la syntaxe est différé de Array.slice() et String.slice(), Gecko et WebKit ont retiré leur support et ajouté le support de la nouvelle syntaxe mozSlice() / Blob.webkitSlice.

À partir de Gecko 13,0 et Chrome 21, slice() n'est plus préfixé. ‡

Notes sur Gecko

Avant Gecko 12,0 , il y avait un bug qui affectait le comportement de slice(); cela n'a pas fonctionné pour les postes de start et de end en dehors de la plage des valeurs 64 bits signée, il a été fixé à soutenir les valeurs 64 bits non signés.

Notes sur Android 4.2 ou inférieur

L'objet Blob n'existe pas sur android 4.2 ou inférieur (à vérifier pour 4.3). Référez-vous à cette discussion sur Stack Overflow (utiliser window.WebKitBlobBuilder).

Voir aussi

• File API Specification: BlobWD
• File API Specification: BlobED
• BlobBuilder
• File
• FormData