Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use the Blob object in HTML5. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

The Blob object in HTML5 is conceptually different from the BLOB type in MYSQL. The BLOB type in MYSQL is just a binary data container. In addition to storing binary data, the Blob object in HTML5 can also set the MINE type of this data, which is equivalent to the storage of files, and many other binary objects are also inherited from this object.

In earlier versions of modern browsers, this Blob object has not yet been normalized, so it needs to be created in ways such as BlobBuilder. But now that Blob is so standardized that it can be created directly by new its constructor Blob, and almost all browsers support this way, there is no need to worry about the old standard.

CSS Code copies content to the clipboard

Var data=' cobalt subcarbonate'; var blob=new Blob ([data], {"type": "text/html"}); console.log (blob)

So we create a Blob object, note that the parameters of the Blob constructor are weird, the first parameter is a set of data, so it must be an array, even if there is only one string as in the above example, it must be assembled by numbers. The second parameter is the configuration property of this Blob object. Currently, there is only one type, that is, the associated MIME, which needs to be set, and key-value may be used for future expansion.

So what's the use of turning the data into Blob? For the Blob object, we can create a URL to access it. Use the createObjectURL method of the URL object.

CSS Code copies content to the clipboard

Var data=' cobalt subcarbonate'; var blob=new Blob ([data], {"type": "text/html"}); onload=function () {var iframe=document.createElement ("iframe"); iframe.src=URL.createObjectURL (blob); document.body.appendChild (iframe);}

Not only the text/html in the above example, but any type supported by the browser can be used in this way. And the life cycle of this Blob-URL is from creation to document release, which will not cause a waste of resources.

Blob is a very basic binary data object in HTML5, and the operation parameters of many methods support the use of Blob, which I can't enumerate. In summary, almost all methods whose parameter types are binary data support using Blob as a parameter. So Blob the data makes it easier to manipulate some of the columns that follow.

Method

Slice ()

Returns a new Blob object that contains data within the specified range in the source Blob object.

CSS Code copies content to the clipboard

Blob slice (optional long long start, optional long long end, optional DOMString contentType})

Parameters.

Start optional

Start indexing, which can be negative, and the syntax is similar to the slice method of an array. The default value is 0.

End optional

End the index, which can be negative, and the syntax is similar to the slice method of an array. The default value is the last index.

ContentType optional

The MIME type of the new Blob object, which will become the value of the type property of the new Blob object, default to an empty string.

Return value

A new Blob object that contains data within the specified range in the source Blob object.

Be careful

If the value of the start parameter is greater than the value of the size property of the source Blob object, the size value of the returned Blob object is 0, which means it does not contain any data.

BlobPropertyBag

An object that contains two properties, type and endings.

Type

Set the type property of the Blob object.

Endings (abandoned)

Corresponds to the endings parameter of the BlobBuilder.append () method. The value of this parameter can be "transparent" or "native".

Examples of the usage of Blob constructor

The following code:

CSS Code copies content to the clipboard

Var aFileParts = ["hey!"]; var oMyBlob = new Blob (aFileParts, {"type": "text\ / xml"}); / / the blob

Equivalent to:

CSS Code copies content to the clipboard

Var oBuilder = new BlobBuilder (); var aFileParts = ["hey!"]; oBuilder.append (aFileParts [0]); var oMyBlob = oBuilder.getBlob ("text\ / xml"); / / the blob

The BlobBuilder interface provides another way to create Blob objects, but this method is now obsolete, so it should no longer be used.

Example: create an object URL using an array of types and a Blob object

CSS Code copies content to the clipboard

Var typedArray = GetTheTypedArraySomehow (); var blob = new Blob ([typedArray], {type: "application/octet-binary"}); / / pass in an appropriate MIME type var url = URL.createObjectURL (blob)

/ / A URL string such as blob:d3958f5c-0777-0845-9dcf-2cb28783acaf will be generated

/ / you can use it like a normal URL, such as on img.src.

On the use of Blob objects in HTML5 to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.