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
|
---
title: Blob
slug: Web/API/Blob
translation_of: Web/API/Blob
---
<div>{{APIRef("File API")}}</div>
<p>Об'єкт <code>Blob</code> являє собою файло-подібний об'єкт незмінних, початкових даних. Blob представляє дані, що не обов'язкові у нативному форматі JavaScript. Вигляд {{domxref("File")}} заснований на <code>Blob</code>, наслідує функціонал Blob та доповнює його для підтримки файлів з файлової системи користувача.</p>
<p>Для <code>формування Blob</code> з інших не-blob об'єктів й даних використовується конструктор {{domxref("Blob.Blob", "Blob()")}}. Для створення Blob, що міститиме підмножину інших даних Blob, викликається метод {{domxref("Blob.slice()", "slice()")}}. Для отримання Blob для файла з файлової системи користувача перегляньте документацію до {{domxref("File")}}.</p>
<p>API, що працюють з <code>Blob</code>, також перелічені у документації {{domxref("File")}}.</p>
<div class="note">
<p><strong>Зауваження:</strong> <code>Метод slice()</code> другим парметром приймає початкову довжину для індикації кількості байтів<code>, які будуть скопійовані у новий Blob</code>. Якщо вказувати змінні таким чином<code>: початковій індекс + довижина, що привищує </code>розмір <code>джерела Blob</code>, <code>повератємий Blob</code> буде містити дані від початкового індексу <code>до кінця джерела Blob</code>.</p>
</div>
<div class="note"><strong>Зауваження:</strong> Майте на увазі, <code>що метод slice()</code> має вендорні префікси у деяких браузерах и версіях: <code>blob.mozSlice()</code> для Firefox 12 та попередніх <code>й blob.webkitSlice()</code> у Safari. Стара версія методу <code>slice()</code>, без вендорних префіксів, має іншу семантику та вважається застарілою. <code>Підтримка blob.mozSlice()</code> була припинена з Firefox 30.</div>
<h2 id="Конструктор">Конструктор</h2>
<dl>
<dt>{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}</dt>
<dd>Повертає новостворенний <code>об'єкт Blob</code>, чий контент складається з ланцюга масивів значень вхідних парметрів.</dd>
</dl>
<h2 id="Властивості">Властивості</h2>
<dl>
<dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt>
<dd>Булєве значення, що вказує, чи був метод {{domxref("Blob.close()")}} викликан на Blob. Закритий Blob не може бути прочитаний.</dd>
<dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
<dd>Розмір, у байтах, даних, що міститься у об'єкті <code>Blob</code>.</dd>
<dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
<dd>Строка, що вказує MIME тип даних, що містяться <code>у Blob</code>. Якщо тип невідомий, ця строка порожня.</dd>
</dl>
<h2 id="Методи">Методи</h2>
<dl>
<dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt>
<dd>Закриває об'єкт Blob, можливо, звілняючи <span class="short_text" id="result_box" lang="uk"><span>використовувані</span></span> ресурси.</dd>
<dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
<dd>Повертає новий об'єкт <code>Blob</code>, що містить дані у вказаному диапазоні байтів джерела <code>Blob</code>.</dd>
</dl>
<h2 id="Приклади">Приклади</h2>
<h3 id="Приклад_використання_конструктора_Blob">Приклад використання конструктора Blob</h3>
<p>{{domxref("Blob.Blob", "Blob() constructor")}} дозволяє створювати Blob з інших об'єктів. Наприклад, щоб сконструювати Blob із стрічки:</p>
<pre>var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</pre>
<div class="warning">
<p>До того, як конструктор Blob став доступний, це можна було зробити за допомогою {{domxref("BlobBuilder")}} API, яка зараз вважається застарілою:</p>
<pre class="brush: js">var builder = new BlobBuilder();
var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
builder.append(fileParts[0]);
var myBlob = builder.getBlob('text/xml');
</pre>
</div>
<h3 id="Приклад_створення_URL_типізованого_масиву_з_використанням_Blob">Приклад створення URL типізованого масиву з використанням Blob</h3>
<p>Наступний код:</p>
<pre class="brush: js">var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
var url = URL.createObjectURL(blob);
// url буде виглядати наступним чином: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// тепер ви можете використовувати url у будь-якому контексті, де можуть бути використані звичайні URLs, наприклад img.src, тощо.
</pre>
<h3 id="Приклад_отримання_даних_з_Blob">Приклад отримання даних з Blob</h3>
<p>Єдиний шлях для отримання даних з Blob це використовуючи {{domxref("FileReader")}}. Наступиний код зчитує дані з Blob у вигляді типізованого масиву.</p>
<pre class="brush: js">var reader = new FileReader();
reader.addEventListener("loadend", function() {
// reader.result містить контент Blob у вигляді типізованого масиву
});
reader.readAsArrayBuffer(blob);</pre>
<p>Вікористовуючи інші методи {{domxref("FileReader")}}, можна прочитати контент Blob у вигляді строки або URL.</p>
<h2 id="Специфікації">Специфікації</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Специфікация</th>
<th scope="col">Статус</th>
<th scope="col">Коментар</th>
</tr>
<tr>
<td>{{SpecName('File API','#blob','Blob')}}</td>
<td>{{Spec2('File API')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>5<sup>[1]</sup></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>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><code>Blob()</code> constructor</td>
<td>20</td>
<td>{{CompatGeckoDesktop("13.0")}}</td>
<td>10</td>
<td>12.10</td>
<td>6</td>
</tr>
<tr>
<td><code>close()</code> and <code>isClosed</code></td>
<td>{{CompatUnknown}}</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>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatUnknown}}</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>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>Blob()</code> constructor</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>close()</code> and <code>isClosed</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}<sup>[4]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] A version of <code>slice()</code> taking the length as second argument was implemented in <a href="http://trac.webkit.org/changeset/55670">WebKit</a> and <a href="http://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a>. However, since that syntax differed from {{jsxref("Array/slice", "Array.slice()")}} and {{jsxref("String/slice", "String.slice()")}}, WebKit removed support and added support for the new syntax as <a href="http://trac.webkit.org/changeset/83873"><code>Blob.webkitSlice()</code></a>.</p>
<p>[2] A version of <code>slice()</code> taking the length as second argument was implemented in <a href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a>. However, since that syntax differed from {{jsxref("Array/slice", "Array.slice()")}} and {{jsxref("String/slice", "String.slice()")}}, Gecko removed support and added support for the new syntax as <code>mozSlice()</code>.</p>
<p>[3] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, there was a bug that affected the behavior of <code>slice()</code>; it did not work for <code>start</code> and <code>end</code> positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.</p>
<p>[4] See {{bug("1048325")}}</p>
<h2 id="Gecko_notes_availability_in_privileged_code">Gecko notes: availability in privileged code</h2>
<p>To use from chrome code, JSM and Bootstrap scope, you have to import it like this:</p>
<pre class="brush: js">Cu.importGlobalProperties(['Blob']);
</pre>
<p><code>Blob</code> is available in Worker scopes.</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{domxref("BlobBuilder")}}</li>
<li>{{domxref("File")}}</li>
<li>{{domxref("URL.createObjectURL")}}</li>
<li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
</ul>
|
