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

This article mainly explains "how to use Blob objects in HTML5". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's take you to learn how to use Blob objects in HTML5.

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

In earlier versions of modern browsers, this Blob object was not normalized, so something like BlobBuilder was needed to create it. But now Blob is standardized enough to be created directly by its constructor Blob, and almost all browsers already support this method, so there is no need to struggle with the old standard.

CSS Code Copy content to clipboard

var data='cobalt subcarbonate';

var blob=new Blob([data],{"type":"text/html"});

console.log(blob);

So we create a Blob object, note that Blob constructor parameters are strange, the first parameter is a set of data, so it must be an array, even if there is only one string like the above example must be packed in an array. The second parameter is the configuration attribute for the Blob object. Currently, there is only one type that needs to be set, i.e., the relevant MIME. The key-value method may be used for future extensions.

So, what's the point of making data blobs? For Blob objects, we can create a URL to access it. Use the createObjectURL method of the URL object.

CSS Code Copy content to 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 text/html in the example above, but any type supported by the browser can be used this way. And the life cycle of this Blob-URL is from creation to document release, which does not cause waste of resources.

Blob is a very basic binary data object in HTML5. Many method parameters support the use of Blob, which I can't list at once. In summary, almost all methods whose argument types are binary data support blobs as arguments. So blobs make it easier to do some column operations later on.

method

slice()

Returns a new Blob object containing the specified range of data from the source Blob object.

CSS Code Copy content to clipboard

Blob slice(

optional long long start,

optional long long end,

optional DOMString contentType

};

parameters

start Optional

Start index, can be negative, syntax similar to array slice method. The default value is 0.

end Optional

End index, can be negative, syntax similar to array slice method. The default is the last index.

contentType Optional

The MIME type of the new Blob object, which will be the value of the new Blob object's type attribute, defaults to an empty string.

return value

A new Blob object containing the data in the specified range in the source Blob object.

note

If the value of the start parameter is greater than the value of the size property of the source Blob object, the returned Blob object has a size value of 0, which means it contains no data.

BlobPropertyBag

An object with two attributes type and endings.

type

Sets the type property of the Blob object.

endings(Obsolete)

Endings parameter corresponding to BlobBuilder.append() method. The value of this parameter can be "transparent" or "native".

Blob constructor usage example

The code below:

CSS Code Copy content to clipboard

var aFileParts = ["hey! "];

var oMyBlob = new Blob(aFileParts, { "type" : "text//xml" }); // the blob

Equivalent to:

CSS Code Copy content to 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 that is now obsolete and should no longer be used.

Example: Creating an object URL using a type array and Blob object

CSS Code Copy content to clipboard

var typedArray = GetTheTypedArraySomehow();

var blob = new Blob([typeArray], {type: "application/octet-binary"}); //Pass in an appropriate MIME type

var url = URL.createObjectURL(blob);

//will generate a URL string like blob: d3958f5 c-0777-0845-9dcf-2cb 28783acaf

//You can use it like a normal URL, for example on img.src.

At this point, I believe that everyone has a deeper understanding of "how to use Blob objects in HTML5," so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

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.