1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
|
---
title: Blob
slug: Web/API/Blob
tags:
- API
- Référence(2)
- WebAPI
translation_of: Web/API/Blob
---
<div>{{APIRef("File API")}}</div>
<p>Un objet <strong><code>Blob</code></strong> représente un objet, semblable à un fichier, qui est immuable et qui contient des données brutes. Les <em>blobs</em> (pour <em><strong>B</strong>inary <strong>L</strong>arge <strong>Ob</strong>jects</em>) représentent des données qui ne sont pas dans un format JavaScript natif. L'interface {{domxref("File")}} est basée sur l'interface <code>Blob</code> 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.</p>
<p>Pour construire un <code>Blob</code> à 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 <code>Blob</code> à partir d'un fichier du système de l'utilisateur, consulter la documentation {{domxref("File")}}.</p>
<p>Les API qui acceptent des objets <code>Blob</code> sont également listées sur la documentation de {{domxref("File")}}.</p>
<div class="note">
<p><strong>Note :</strong> La méthode <code>slice()</code> utilisait auparavant un deuxième argument qui indiquait le nombre d'octets à copier dans le nouveau blob. Si on utilisait un couple de valeur <code>début + longueur</code> 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.</p>
</div>
<div class="note"><strong>Note :</strong> La méthode <code>slice()</code> doit être utilisée avec certains préfixes sur certaines versions de navigateurs : <code>blob.mozSlice()</code> pour Firefox 12 et antérieur, <code>blob.webkitSlice()</code> dans Safari. Un ancienne version de <code>slice()</code> sans préfixes avait une sémantique différente et est désormais obsolète. La prise en charge de <code>blob.mozSlice()</code> a été abandonnée avec Firefox 30.</div>
<h2 id="Constructeur">Constructeur</h2>
<dl>
<dt>{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}</dt>
<dd>Ce constructeur renvoie un nouvel objet <code>Blob</code> qui contient la concaténation des valeurs du tableau passé en paramètre.</dd>
</dl>
<h2 id="Propriétés">Propriétés</h2>
<dl>
<dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt>
<dd>Un booléen qui indique si la méthode {{domxref("Blob.close()")}} a été appelée sur le blob. Les blobs qui ont été fermés ne peuvent pas être lus.</dd>
<dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
<dd>La taille des données contenues dans l'objet <code>Blob</code>, exprimée en octets.</dd>
<dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
<dd>Une chaîne de caractères qui indique le type MIME des données contenues dans le <code>Blob</code>. Si le type est inconnu, la chaîne de caractères est vide.</dd>
</dl>
<h2 id="Méthodes">Méthodes</h2>
<dl>
<dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt>
<dd>Cette méthode clotûre le blob et libère éventuellement les ressources sous-jacentes.</dd>
<dt>{{domxref("Blob.slice()", "Blob.slice([début[, fin[, contentType]]])")}}</dt>
<dd>Cette méthode renvoie un nouvel objet <code>Blob</code> qui contient les données dans le fragment du <code>Blob</code> source entre <code>début</code> et <code>fin</code>.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<h3 id="Utilisation_du_constructeur_Blob">Utilisation du constructeur <code>Blob</code></h3>
<p>Le 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 :</p>
<pre>var debug = {coucou: "monde"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</pre>
<h3 id="Créer_une_URL_de_données_vers_un_tableau_typé">Créer une URL de données vers un tableau typé</h3>
<pre class="brush: js">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)
</pre>
<h3 id="Extraire_des_données_à_partir_d'un_blob">Extraire des données à partir d'un blob</h3>
<p>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é.</p>
<pre class="brush: js">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);</pre>
<p>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.</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
<tr>
<td>{{SpecName('File API','#blob','Blob')}}</td>
<td>{{Spec2('File API')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Support simple</td>
<td>5<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}</td>
<td>4<sup>[2]</sup></td>
<td>10</td>
<td>11.10<sup>[1]</sup></td>
<td>5.1<sup>[1]</sup></td>
</tr>
<tr>
<td><code>slice()</code></td>
<td>10 {{property_prefix("webkit")}}<br>
21</td>
<td>{{CompatVersionUnknown}}</td>
<td>5 {{property_prefix("moz")}}<sup>[3]</sup><br>
13</td>
<td>10</td>
<td>12</td>
<td>5.1 {{property_prefix("webkit")}}</td>
</tr>
<tr>
<td>Constructeur <code>Blob()</code></td>
<td>20</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("13.0")}}</td>
<td>10</td>
<td>12.10</td>
<td>6</td>
</tr>
<tr>
<td><code>close()</code> et <code>isClosed</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}<sup>[4]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Support simple</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("13.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>slice()</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>Constructeur <code>Blob()</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>close()</code> et <code>isClosed</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}<sup>[4]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] La version de <code>slice()</code> qui prend en compte la longueur comme deuxième argument a été implémentée dans <a href="https://trac.webkit.org/changeset/55670">WebKit</a> et <a href="https://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a>. 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 <a href="http://trac.webkit.org/changeset/83873"><code>Blob.webkitSlice()</code></a>.</p>
<p>[2] Une version de <code>slice()</code> qui prenait une longueur en deuxième argument était implémentée dans <a href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a>. 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 <code>mozSlice()</code>.</p>
<p>[3] Avant Gecko 12.0 {{geckoRelease("12.0")}}, un bug impactait <code>slice()</code>; les paramètres <code>start</code> et <code>end</code> é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).</p>
<p>[4] Cf. {{bug("1048325")}}</p>
<h3 id="Notes_de_compatibilité_pour_Gecko_accéder_à_cette_fonctionnalité_dans_du_code_privilégié">Notes de compatibilité pour Gecko : accéder à cette fonctionnalité dans du code privilégié</h3>
<p>Pour utiliser cette fonctionnalité dans du chrome, JSM ou Bootstrap, il faudra l'importer de cette façon :</p>
<pre class="brush: js">Cu.importGlobalProperties(['Blob']);
</pre>
<p><code>Blob</code> est disponible dans les portées des <em>workers</em>.</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{domxref("BlobBuilder")}}</li>
<li>{{domxref("File")}}</li>
<li>{{domxref("URL.createObjectURL")}}</li>
<li><a href="/fr/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
</ul>
|
