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 {{domxref("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 {{domxref("Blob.Blob", "Blob()")}}. Pour créer un blob qui contient un sous-ensemble d'un autre blob, on pourra employer la méthode {{domxref("Blob.slice()", "slice()")}}. Pour obtenir un Blob à partir d'un fichier du système de l'utilisateur, consulter la documentation {{domxref("File")}}.
Les API qui acceptent des objets Blob sont également listées sur la documentation de {{domxref("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.
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.Blob qui contient la concaténation des valeurs du tableau passé en paramètre.Blob, exprimée en octets.Blob. Si le type est inconnu, la chaîne de caractères est vide.Blob qui contient les données dans le fragment du Blob source entre début et fin.BlobLe constructeur {{domxref("Blob.Blob", "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'});
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)
La seule façon de lire le contenu d'un blob est d'utiliser un objet {{domxref("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 {{domxref("FileReader")}}, on peut lire le contenu du blob si c'est une chaîne ou une URL de données.
| Spécification | État | Commentaires |
|---|---|---|
| {{SpecName('File API','#blob','Blob')}} | {{Spec2('File API')}} | Définition initiale. |
{{CompatibilityTable}}
| Fonctionnalité | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Support simple | 5[1] | {{CompatVersionUnknown}} | 4[2] | 10 | 11.10[1] | 5.1[1] |
slice() |
10 {{property_prefix("webkit")}} 21 |
{{CompatVersionUnknown}} | 5 {{property_prefix("moz")}}[3] 13 |
10 | 12 | 5.1 {{property_prefix("webkit")}} |
Constructeur Blob() |
20 | {{CompatVersionUnknown}} | {{CompatGeckoDesktop("13.0")}} | 10 | 12.10 | 6 |
close() et isClosed |
{{CompatUnknown}} | {{CompatNo}} | {{CompatNo}}[4] | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
| Fonctionnalité | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatGeckoMobile("13.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
slice() |
{{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Constructeur Blob() |
{{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
close() et isClosed |
{{CompatUnknown}} | {{CompatNo}} | {{CompatNo}}[4] | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
[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 {{jsxref("Array/slice", "Array.slice()")}} et de {{jsxref("String/slice", "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 {{jsxref("Array/slice", "Array.slice()")}} et de {{jsxref("String/slice", "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 {{geckoRelease("12.0")}}, 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")}}
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.