Table of contents
- 1. Properties
- 2. Methods
- 2.1. slice()
- 2.1.1. Parameters
- 2.1.2. Return value
- 2.1.3. Notes
- 2.1. slice()
- 3. Constructor
- 3.1. Parameters
- 3.1.1. blobParts Array
- 3.1.2. BlobPropertyBag
- 3.1. Parameters
- 4. Browser compatibility
- 5. See also
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.
An easy way to construct a Blob is by using the BlobBuilder
interface, which lets you iteratively append data to a blob, then retrieve the completed blob when you're ready to use it for something. Another way is to use the slice() method to create a blob that contains a subset of another blob's data. Newer version of browsers might have the Blob() constructor, an even easier way of creating a Blob.
slice() method has vendor prefixes: blob.mozSlice() for Firefox and blob.webkitSlice() for Chrome. An old version of the slice() method, without vendor prefixes, had different semantics, as described below.Properties
| Property | Type | Description |
size | unsigned long long | The size, in bytes, of the data contained in the Blob object. Read only. |
type | DOMString
| An ASCII-encoded string, in all lower case, indicating the MIME type of the data contained in the Blob. If the type is unknown, this string is empty. Read only. |
Methods
slice()
Returns a new Blob object containing the data in the specified range of bytes of the source Blob.
Blob slice( optional long long start, optional long long end, optional DOMString contentType };
Parameters
startOptional- An index into the
Blobindicating the first byte to copy into the newBlob. If you specify a negative value, it's treated as an offset from the end of the string toward the beginning. For example, -10 would be the 10th from last byte in theBlob. The default value is 0. endOptional- An index into the
Blobindicating the last byte to copy into the newBlob. If you specify a negative value, it's treated as an offset from the end of the string toward the beginning. For example, -10 would be the 10th from last byte in theBlob. The default value issize. contentTypeOptional- The content type to assign to the new
Blob; this will be the value of itstypeproperty. The default value is an empty string.
Return value
A new Blob object containing the specified data from the source Blob.
Notes
If you specify a value for start that is larger than the size of the source Blob, the returned Blob has size 0 and contains no data.
Constructor
The latest File API specification draft has made Blob to be constructible, making it easy to create a Blob object without having to use BlobBuilder
.
The constructor can be invoked with or without parameters. When invoked with parameters, the constructor will take the following argument(s):
Parameters
blobParts Array
An array of data to append to the Blob being constructed, can take any number of ArrayBuffer, Blob
, or DOMString
members, in any order.
BlobPropertyBag
An object which contains two members: type and endings.
type- corresponds to the
typeproperty. endings- corresponds to the
endingsparameter of theBlobBuilder.append(). takes either"transparent"or"native".
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 5 | 4 | 10 | 11.10 | 5.1 |
slice() | 10 webkit | 13 5 moz | ? | --† | 5.1 (534.29) webkit |
Blob() constructor | ? | (Yes) | ? | ? | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |
Notes on the slice() implementations
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.
That version of the slice was implemented in Firefox 4, WebKit, and Opera 11.10. However, since that syntax is differed from Array.slice() and String.slice(), Gecko and WebKit removed support and added support for the new syntax as Blob.mozSlice/Blob.webkitSlice. While Opera hasn't dropped support nor implemented the new syntax with prefix, they are currently working on changing the semantics (see #c0 on
bug 725289
). WebKit hasn't yet dropped the prefix (see
WebKit bug 78111).


Mozilla Developer Network