A Blob
object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File
interface is based on Blob
, inheriting blob functionality and expanding it to support files on the user's system.
To construct a Blob
from other non-blob objects and data, use the Blob()
constructor. To create a blob that contains a subset of another blob's data, use the slice()
method. To obtain a Blob
object for a file on the user's file system, see the File
documentation.
The APIs accepting Blob
objects are also listed on the File
documentation.
Note: The slice()
method had initially taken length
as the second argument to indicate the number of bytes to copy into the new Blob
. If you specified values such that start + length
exceeded the size of the source Blob
, the returned Blob
contained data from the start index to the end of the source Blob
.
slice()
method has vendor prefixes on some browsers and versions: blob.mozSlice()
for Firefox 12 and earlier and blob.webkitSlice()
in Safari. An old version of the slice()
method, without vendor prefixes, had different semantics, and is obsolete. The support for blob.mozSlice()
has been dropped with Firefox 30.Blob(blobParts[, options])
Blob
object whose content consists of the concatenation of the array of values given in parameter.Blob.isClosed
Read only
Blob.close()
method has been called on the blob. Closed blobs can not be read.Blob.size
Read only
Blob
object.Blob.type
Read only
Blob
. If the type is unknown, this string is empty.Blob.close()
Blob.slice([start[, end[, contentType]]])
Blob
object containing the data in the specified range of bytes of the source Blob
.The Blob() constructor
allows one to create blobs from other objects. For example, to construct a blob from string:
var debug = {hello: "world"}; var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
Before the Blob constructor was available, this could be accomplished through the BlobBuilder
API, which is now deprecated:
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');
The following code:
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.
The only way to read content from a Blob is to use a FileReader
. The following code reads the content of a Blob as a typed array.
var reader = new FileReader(); reader.addEventListener("loadend", function() { // reader.result contains the contents of blob as a typed array }); reader.readAsArrayBuffer(blob);
By using other methods of FileReader
, it is possible to read the contents of a Blob as a string or a data URL.
Specification | Status | Comment |
---|---|---|
File API The definition of 'Blob' in that specification. | Working Draft | Initial definition |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 5[1] | (Yes) | 4[2] | 10 | 11.10[1] | 5.1[1] |
slice() | 10 webkit 21 | (Yes) | 5 moz[3] 13 | 10 | 12 | 5.1 webkit |
Blob() constructor | 20 | (Yes) | 13.0 (13.0) | 10 | 12.10 | 6 |
close() and isClosed
| ? | No support | No support[4] | ? | ? | ? |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | 13.0 (13.0) | ? | ? | ? |
slice() | ? | (Yes) | ? | ? | ? | ? |
Blob() constructor | ? | (Yes) | ? | ? | ? | ? |
close() and isClosed
| ? | No support | No support[4] | ? | ? | ? |
[1] A version of slice()
taking the length as second argument was implemented in WebKit and Opera 11.10. However, since that syntax differed from Array.slice()
and String.slice()
, WebKit removed support and added support for the new syntax as Blob.webkitSlice()
.
[2] A version of slice()
taking the length as second argument was implemented in Firefox 4. However, since that syntax differed from Array.slice()
and String.slice()
, Gecko removed support and added support for the new syntax as mozSlice()
.
[3] Prior to Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), there was a bug that affected the behavior of slice()
; it did not work for start
and end
positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.
[4] See bug 1048325
To use from chrome code, JSM and Bootstrap scope, you have to import it like this:
Cu.importGlobalProperties(['Blob']);
Blob
is available in Worker scopes.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Blob