---
title: Blob
slug: Web/API/Blob
tags:
  - API
  - Files
  - Reference
  - TopicStub
  - checkTranslation
translation_of: Web/API/Blob
---
<p>{{ APIRef("File API") }}</p>

<h2 id="Übersicht">Übersicht</h2>

<p>Ein <code>Blob</code> ist eine dateiähnliche Menge unveränderlicher Roh-Daten, die nicht notwendigerweise native JavaScript-Daten enthalten. Das {{ domxref("File") }}-Interface basiert auf <code>Blob</code> und erweitert dessen Funktionen und die Unterstützung von Dateien auf dem System des Nutzers.</p>

<p>Eine einfache Methode, um einen Blob zu erstellen, ist der Aufruf des {{domxref("Blob.Blob", "Blob()")}}-Konstruktors. Anders ist es auch mit Hilfe eines Aufrufs von <code>slice()</code> möglich, einen Ausschnitt aus einem anderen Blob zu erhalten.</p>

<p>Die APIs, welche Blob-Objekte akzeptieren, werden ebenfalls in der {{domxref("File")}}-Dokumentation genannt.</p>

<div class="note">
<p>Note: The <code>slice()</code> method had initially taken <code>length</code> as the second argument to indicate the number of bytes to copy into the new <code>Blob</code>. If you specified values such that <code>start + length</code>exceeded the size of the source <code>Blob</code>, the returned <code>Blob</code> contained data from the start index to the end of the source <code>Blob</code>.</p>
</div>

<div class="note">
<p>Zu beachten: Der <code>slice()-</code>Methode kann in manchen Browsern (und Versionen) ein Vendor-Präfix vorangestellt sein. Firefox 12 und früher: <code>blob.mozSlice()</code>. Safari: <code>blob.webkitSlice()</code>. Eine alte Version von <code>slice()</code> ohne Vendor-Präfix ist überholt. Die Unterstützung von <code>blob.mozSlice()</code> wurde mit Firefox 30 eingestellt.</p>
</div>

<h2 id="Konstruktor">Konstruktor</h2>

<dl>
 <dt>{{domxref("Blob.Blob", "Blob()")}}</dt>
 <dd>Gibt einen neuen <code>Blob</code> zurück, dessen Inhalt das als Parameter übergebene Array in zusammengesetzter Form ist.</dd>
</dl>

<h2 id="Eigenschaften">Eigenschaften</h2>

<dl>
 <dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt>
 <dd>Gibt einen booleschen Wert zurück, der anzeigt, ob die {{domxref("Blob.close()")}}-Methode zu diesem <code>Blob</code> bereits aufgerufen wurde. Geschlossene Blobs können nicht mehr ausgelesen werden.</dd>
 <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
 <dd>Gibt die Größe des <code>Blob</code>-Inhalts in Bytes zurück.</dd>
 <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
 <dd>Ein <code>String,</code> der den MIME-Typ enthält. Ist der Typ unbekannt, ist der Rückgabe-String leer.</dd>
</dl>

<h2 id="Methoden">Methoden</h2>

<dl>
 <dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt>
 <dd>Schließt das <code>Blob</code>-Objekt und gibt gegebenenfalls reservierte Ressourcen frei.</dd>
 <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
 <dd>Gibt ein neues <code>Blob-Objekt</code> zurück, das die spezifierte Menge an Daten enthält.</dd>
</dl>

<h2 id="Beispiele">Beispiele:</h2>

<h3 id="Beispielanwendung_des_Blob-Konstruktors">Beispielanwendung des Blob-Konstruktors</h3>

<p>Der {{domxref("Blob.Blob", "Blob() constructor")}} ermöglicht es, <code>Blobs</code> aus Objekten zu erzeugen. Beispielsweise kann man einen <code>Blob</code> von einem String-Objekt erzeugen:</p>

<pre><code>var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</code>
</pre>

<div class="warning">
<p>{{ domxref("BlobBuilder") }} bietet noch eine weitere Möglichkeit Blobs zu erstellen, welche mittlerweile allerdings veraltet ist und nicht mehr genutzt werden sollte.</p>

<div class="syntaxbox">
<pre class="brush: js">var builder = new BlobBuilder();
var fileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'];
builder.append(fileParts[0]);
var myBlob = builder.getBlob('text/xml');</pre>
</div>
</div>

<h3 id="Erstellen_einer_URL_für_ein_typed_array_durch_einen_Blob">Erstellen einer URL für ein "typed array" durch einen Blob</h3>

<p>Beispiel-Code:</p>

<pre class="brush: js">var typedArray = EinTypedArrayErstellen();
var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // ein gültiger MIME-Typ
var url = URL.createObjectURL(blob);
// Die URL wird etwa so sein: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// Nun kann die URL überall genutzt werden, wo URLs verwendung finden, z.B. in Bildquellen (image.src)
</pre>

<h3 id="Daten_aus_einem_Blob_lesen">Daten aus einem Blob lesen</h3>

<p>Um Daten aus einem Blob zu lesen, muss ein {{domxref("FileReader")}} genutzt werden. Der folgende Code liest den Inhalt eines Blobs als ein typisiertes Array aus.</p>

<pre class="brush: js">var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result beinhaltet den Inhalt des Blobs
});
reader.readAsArrayBuffer(blob);</pre>

<p>Über eine andere Methode von {{domxref("FileReader")}} ist es möglich, den Inhalt eines Blobs als String oder Data-URL zu lesen.</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Hinweis</th>
  </tr>
  <tr>
   <td>{{SpecName('File API','#blob','Blob')}}</td>
   <td>{{Spec2('File API')}}</td>
   <td>Grundlegende Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2>

<p>{{CompatibilityTable}}</p>

<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[1]</td>
   <td>4[2]</td>
   <td>10</td>
   <td>11.10[1]</td>
   <td>5.1[1]</td>
  </tr>
  <tr>
   <td><code>slice()</code></td>
   <td>10 {{property_prefix("webkit")}}<br>
    21</td>
   <td>5 {{property_prefix("moz")}}[3]<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}}[4]</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>

<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}}[4]</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}<br>
     </td>
  </tr>
 </tbody>
</table>

<h3 id="Anmerkung_zur_slice()-Implementierung">Anmerkung zur slice()-Implementierung</h3>

<p>[1] Eine Version von <code>slice()</code>, die als zweites Argument die gewünschte Größe enthält, war in <a href="http://trac.webkit.org/changeset/55670">WebKit</a> und <a href="http://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a> implementiert. Da sich jedoch diese Syntax von {{jsxref("Array/slice", "Array.slice()")}} und {{jsxref("String/slice", "String.slice()")}} unterschied, wurde die Unterstützung in WebKit fallen gelassen zu Gunsten der neuen Syntax von <code><a href="http://trac.webkit.org/changeset/83873">Blob.webkitSlice()</a>.</code></p>

<p>[2] Eine Variante von <code>slice()</code>, die als zweites Argument die gewünschte Größe enthält, war in <a href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a> verfügbar. Da sich jedoch diese Syntax von {{jsxref("Array/slice", "Array.slice()")}} und {{jsxref("String/slice", "String.slice()")}} unterschied, wurde diese Unterstützung in Gecko fallen gelassen zu Gunsten der neuen Syntax von <code>mozSlice()</code>.</p>

<p>[3] Vor Gecko 12.0 {{ geckoRelease("12.0") }} trat ein Fehler im Verhalten von slice() auf; die erste und letzte Position außerhalb des Bereichs von 64-Bit-Werten wurden fehlerhaft verarbeitet, was nun für vorzeichenlose 64-Bit-Werte behoben wurde.</p>

<p>[4] Siehe {{bug("1048325")}}</p>

<h3 id="Anmerkungen_zu_Gecko">Anmerkungen zu Gecko</h3>

<p>Vor Gecko 12.0 {{ geckoRelease("12.0") }} gab es einen Bug, der das Verhalten von {{ manch("slice") }} beinflusste. Bei Start- und Endpositionen außerhalb von vorzeichenbehafteten 64-Bit-Werten funktionierte die Methode nicht. Dieser Bug wurde mittlerweile behoben und vorzeichenlose 64-Bit-Werte sind nun möglich.</p>

<h2 id="Chrome_Code_-_Scope">Chrome Code - Scope</h2>

<p>Um Blobs im Chrome Code, JSM und Bootstrap Scope zu verwenden, müssen sie folgendermaßen importiert werden:</p>

<pre class="brush: js">Cu.importGlobalProperties(['Blob']);
</pre>

<p><code>Blobs</code> sind auch in Worker-Scopes verfügbar.</p>

<h2 id="Siehe_auch">Siehe auch</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>