Sumário

Um objeto Blob representa um objeto do tipo arquivo, com  dados brutos imutáveis. Blobs representam dados que não estão necessariamente em um formato JavaScript nativo. A interface File é baseada no Blob, herdando funcionalidade blob e expandindo-o para suportar arquivos no sistema do usuário.

Para construir um Blob a partir de outro objeto ou dado não-blob , utilize o construtor Blob(). Para criar um blob que contém um subconjunto de dados de outro blob, use o método slice(). Para obter um objeto Blob de um arquivo no sisema de arquivos do usuário, veja a documentação File.

The APIs accepting Blob objects are also listed on the File documentation.

Nota: O método slice() usava inicialmente length como segundo argumento para indicar o numero de bytes a copiar no novo Blob.  Se você especificou valores de maneira que start + length excederam o tamanho do Blob de origem, o Blob retornado contém dados a partir do início do índice até o final do Blob de origem.

Nota:  Esteja ciente que o método slice() possui prefixos de fornecedores em alguns navegadores e versões: blob.mozSlice() para Firefox 12 e anteriores, e blob.webkitSlice() para Safari. Uma versão antiga do método slice(), sem prefixos de fornecedor, tem semântica diferente, e portanto é obsoleta. O suporta para blob.mozSlice() foi descontinuado a partir do Firefox 30.

Construtor

Blob(blobParts[, opções])
Retorna um novo Blob object cujo conteúdo consiste na concatenação do array de valores passados por parâmentro.

Propriedades

Blob.size Somente leitura
Tamanho em bytes dos dados contidos no objeto Blob.
Blob.type Somente leitura
Uma string que indica o MIME type dos dados no Blob. Se o tipo é desconhecido, então retorna uma string vazia.

Métodos

Blob.slice([start[, end[, contentType]]])
Retorna um novo  Blob object contendo dados em no intervalo de bytes especificado do Blob de origem.

Exemplos

Exemplos de uso do construtor Blob

O código a seguir:

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // o blob

equivale a:

var oBuilder = new BlobBuilder();
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
oBuilder.append(aFileParts[0]);
var oMyBlob = oBuilder.getBlob('text/xml'); // o blob

O BlobBuilder oferece outra maneira para criar Blobs, mas é depreciado e não deveria mais ser usado.

Exemplo para criar uma URL para uma array tipada usando blob

O código a seguir:

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // passe um MIME-type útil aqui
var url = URL.createObjectURL(blob);
// url será algo do tipo: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// agora você pode usar a URL em qualquer contexto em que URLs regulares podem ser usadas, por exemplo: img.src, etc.

Exemplo de Extração de Dados de Um Blob

O único jeito de ler o conteúdo de um Blob é usando FileReader. O código a seguir lê o conteudo de um Blob como um Array.

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result contém o conteúdo do blob como uma array tipada
});
reader.readAsArrayBuffer(blob);

Ao usar outros métodos de FileReader, é possível ler o conteúdo de um Blob como uma string ou como uma data URL.

Especificações

Especificações Status Comentário
File API
The definition of 'Blob' in that specification.
Rascunho atual Definição inicial.

Compatibilidade de Browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 5Edge Full support YesFirefox Full support 4IE Full support 10Opera Full support 11Safari Full support 5.1WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 14Opera Android ? Safari iOS ? Samsung Internet Android ?
Blob() constructor
Experimental
Chrome Full support 20Edge ? Firefox Full support 13
Notes
Full support 13
Notes
Notes Before Firefox 16, the second parameter, when set to null or undefined, leads to an error instead of being handled as an empty dictionary.
IE Full support 10Opera Full support 12Safari Full support 8WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 14
Notes
Full support 14
Notes
Notes Before Firefox 16, the second parameter, when set to null or undefined, leads to an error instead of being handled as an empty dictionary.
Opera Android ? Safari iOS ? Samsung Internet Android ?
sizeChrome Full support 5Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 11Safari Full support 5.1WebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
typeChrome Full support 5Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 11Safari Full support 5.1WebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
sliceChrome Full support 21
Full support 21
No support 5 — 21
Prefixed
Prefixed Requires the vendor prefix: webkit
Edge Full support 12Firefox Full support 13
Notes
Full support 13
Notes
Notes Prior to Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), there was a bug that affected the behavior of Blob.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.
No support 5 — 13
Prefixed
Prefixed Requires the vendor prefix: moz
IE Full support 10Opera Full support 12Safari Full support 5.1
Prefixed
Full support 5.1
Prefixed
Prefixed Requires the vendor prefix: webkit
WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 14Opera 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.

Notas para Gecko

Anterior ao Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), havia um bug que afetava o comportamento do slice(); que não funcionava para as posições start e end fora do intervalo de valores assinados como 64-bit; este bug foi corrigido para dar suporte a valores assinados como 64-bit.

Chrome Code - Disponibilidade de Escopo

No escopo JSM, Blob é disponivel sem a necessidade de nada especial.

No escopo Bootstrap, ele deve ser importado como tal:

const {Blob, Services} = Cu.import('resource://gre/modules/Services.jsm', {});

Veja Também

Etiquetas do documento e colaboradores

Última atualização por: Flicksie,