Introduction and use of BLOB object in JS

Blob Object Introduction

A Blob object that represents a similar file object of immutable, raw data. The blob representation of the data is not necessarily a JavaScript native format Blob object is essentially an object in JS, which can store a large number of binary encoded format data.

Creating BLOB objects

Creating a Blob object is essentially the same way as creating a different object, and is created using the constructor of the Blob (). The constructor accepts two parameters:

The first parameter is a data series, which can be a value in any format.

The second parameter is a type of object {Type:mime that contains two properties, endings: Determines the data format of the first parameter, can be either "transparent" or "native" (transparent words are unchanged, is the default value, native The words are converted by the operating system). }

The Blob () constructor allows you to create a Blob object using another object, such as building a blob with a string

var debug = {hello: "World"}; var New null, 2)],  ' Application/json '});

Since it is an object, the BLOB also has its own properties and methods

Property

• Blob.isclosed (Read only)

  A Boolean value that indicates whether Blob.close () was called on the object. The closed Blob object is not readable.

• Blob.size (Read only)

  The size (in bytes) of the data contained in the Blob object.

• Blob.type (Read only)

  A string that indicates the MIME type of the data that the Blob object contains. If the type is unknown, the value is an empty string.

Method

• Blob.close ()

  Close the Blob object so that the underlying resource can be freed.

• Blob.slice ([start[, end[, ContentType]])

  Returns a new BLOB object that contains the data in the specified range in the source Blob object. In fact, the data in this blob is cut, we need to use this method when uploading the file.

It should be familiar to see these methods and properties above, using the file interface provided by HTML5, and these properties and methods are also available in the file interface. In fact, the file interface is based on BLOBs, inheriting the BLOB function and extending it to support the files on the user's system, that is to say:

The Flie object in the file interface is inherited from the Blob object.

Use of BLOB objects

It says a lot about the conceptual nature of BLOB objects, so let's look at the practical uses.

Multipart upload

First of all to say that the multipart upload, we are in the file upload, because the server restrictions, will limit the file size of each upload to the server is not very large, this time we need to upload a file to be cut, and then upload to the server separately.

If we need to do this, we need to solve two problems:

• How to cut?
• How do I know the current transmission progress?

The question of how to cut first has been explained above, because the file object is inherited from the Blob object, so the file object also has slice this method, we can use this method to cut any one of the file files.

The code is as follows:

var // Each file slice size is set to 1MB. var blob = document.getElementById ("file"). Files[0]; var slices = Math.ceil (blob.size/ bytes_per_chunk); var blobs = [];slices.foreach (function(item, index) {    + 1));});

Through the method above. We get an array of blobs after the cut file object;

The next thing to do is to say that these files are uploaded to the server separately.

In the HTTP1.1 above protocol, there is transfer-encoding this encoding protocol, used to communicate with the server, to know the current Shard pass the file process.

This solves these two problems, we can not only upload files, and can get the progress of file upload.

Paste Picture

BLOBs also have a scenario, which is to get the data on the clipboard for pasting. For example, after QQ, you need to paste on the Web page.

Paste picture We need to solve the following problems

1. Listening for user's paste operation

2. Get the data on the Clipboard

3. Render the obtained data to a Web page

First we can listen to the user's paste operation through the Paste event:

function (e) {    console.info (e);});

The Clipboarddata object in the event object is then taken to get the file data for the picture.

Clipboarddata Object Introduction

Introduce the Clipboarddata object, which is actually an object of type DataTransfer, DataTransfer is an object that is dragged, but actually the paste event is also it.

Introduction to Clipboarddata Properties

Properties	type	Description
DropEffect	String	Default is None
Effectallowed	String	Default is uninitialized
Files	FileList	Paste action is empty list
Items	Datatransferitemlist	Individual data in the Clipboard
Types	Array	Data types in the Clipboard This property is confusing under safari

Items Introduction

Items is a Datatransferitemlist object, which is naturally a datatransferitem type of data.

Property

The Datatransferitem of items has two properties kind and type

Properties	Description
Kind	Typically a string or file
Type	Specific data types, such as which type of string or what type of file, that is, Mime-type

Method

Method	Parameters	Description
Getasfile	Empty	If kind is file, you can use this method to obtain the
Getasstring	function (str)	If kind is a string, you can use this method to get to the string str

There are other methods on the prototype, but it is generally not available when dealing with clipboard operations.

Type Introduction

The common values in general types are Text/plain, text/html, and Files.

value	Description
Text/plain	Normal string
Text/html	HTML with Style
Files	Files (for example, data in a clipboard)

With these methods, we can solve the second problem by acquiring the data on the Clipboard.

Document.addeventlistener (' Paste ',function(e) {console.info (e); varCBD =E.clipboarddata;  for(vari = 0; i < cbd.items.length; i++) {        varitem =Cbd.items[i];        Console.info (item); if(Item.kind = = "File"){            varBlob =Item.getasfile (); if(Blob.size = = 0) {                return;        } console.info (BLOB); }    }});

Finally, we need to render the obtained data to the Web page.

In fact, this is a similar to the upload image local browsing problem. We can upload the retrieved files directly to the server via the HTML5 file interface and then render the picture by speaking the URL address returned by the server. You can also use the Filerender object for local browsing of pictures.

Introduction to Filerender Objects

The only way to read content from a blob is to use FileReader.

The FileReader interface has 4 methods, 3 of which are used to read the file and the other to interrupt the read. The method does not return a read result, regardless of the success or failure of the read, which is stored in the result property.

Method Name	Parameters	Description
Readasbinarystring	File	To read a file as a binary encoding
Readastext	File,[encoding]	To read a file as text
Readasdataurl	File	Read the file as Dataurl
Abort	(none)	Terminal Read operations

The FileReader interface contains a complete set of event models for capturing the state when a file is read.

Events	Description
Onabort	Interrupt
OnError	Error
Onloadstart	Begin
OnProgress	is reading
OnLoad	Successfully read
Onloadend	Read complete regardless of successful failure

Through the above methods and events, we can find that the Readasdataurl method and the OnLoad event can be used to get a local view of the image dataurl.

The final code is as follows:

Document.addeventlistener (' Paste ',function(e) {console.info (e); varCBD =E.clipboarddata; varFR =NewFileReader (); varhtml = ' ';  for(vari = 0; i < cbd.items.length; i++) {            varitem =Cbd.items[i];            Console.info (item); if(Item.kind = = "File"){                varBlob =Item.getasfile (); if(Blob.size = = 0) {                    return;                } console.info (BLOB);                Fr.readasdataurl (BLOB); Fr.on<x>load=function(e) {varResult=document.getelementbyid ("Result"); //Show FilesResult.innerhtml= '  This. Result + '/> '; }            }        }});

So we can listen to the user's paste operation, and the user pasted picture file in real-time rendering into the Web page.

Summarize

The above is my blob object of some learning to share, I hope in the actual application can be helpful to everyone.

Introduction and use of BLOB object in JS