این ترجمه ناقص است. لطفاً در ترجمه این مقاله از انگلیسی کمک کنید.
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.Constructor
Blob(blobParts[, options])
- Returns a newly created
Blob
object whose content consists of the concatenation of the array of values given in parameter.
Properties
Blob.size
Read only- The size, in bytes, of the data contained in the
Blob
object. Blob.type
Read only- A string indicating the MIME type of the data contained in the
Blob
. If the type is unknown, this string is empty.
Methods
Blob.slice([start[, end[, contentType]]])
- Returns a new
Blob
object containing the data in the specified range of bytes of the sourceBlob
.
Examples
Blob constructor example usage
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');
Example for creating a URL to a typed array using a blob
The following code:
var typedArray = GetTheTypedArraySomehow(); var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'}); // 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.
Example for extracting data from a Blob
One 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);
Another way to read content from a Blob is to use a Response. The following code reads the content of a Blob as text:
var text = await (new Response(blob)).text();
By using other methods of FileReader
, it is possible to read the contents of a Blob as a string or a data URL.
Specifications
Specification | Status | Comment |
---|---|---|
File API The definition of 'Blob' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support 5 | Edge Full support Yes | Firefox Full support 4 | IE Full support 10 | Opera Full support 11 | Safari Full support 5.1 | WebView Android ? | Chrome Android ? | Edge Mobile Full support Yes | Firefox Android Full support 14 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Blob() constructor | Chrome Full support 20 | Edge ? | Firefox
Full support
13
| IE Full support 10 | Opera Full support 12 | Safari Full support 8 | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android
Full support
14
| Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
size | Chrome Full support 5 | Edge Full support 12 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11 | Safari Full support 5.1 | WebView Android No support No | Chrome Android No support No | Edge Mobile Full support Yes | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
type | Chrome Full support 5 | Edge Full support 12 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11 | Safari Full support 5.1 | WebView Android No support No | Chrome Android No support No | Edge Mobile Full support Yes | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
slice | Chrome
Full support
21
| Edge Full support 12 | Firefox
Full support
13
| IE Full support 10 | Opera Full support 12 | Safari
Full support
5.1
| WebView Android ? | Chrome Android ? | Edge Mobile Full support Yes | Firefox Android Full support 14 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.