This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Blob Binary large object

A BLOB (binary large object) is a container for storing binary files.

There are several ways to create Blob objects, including calling the Blob constructor, using the slice() method on an existing Blob object to slice out another Blob object, and calling the toBlob method on a Canvas object.

I first saw the word blob half a year ago. At that time, I had never heard of blob before. I looked it up on the Internet.

After looking at the previous series of apis and objects, many students may start to feel dizzy, but we have not mentioned the bloB object in the beginning, and it would be unreasonable not to mention it in this article. After all, Blob worked hard as the father of the File object. The FileReader objects described above can also manipulate blob objects.

Blob objects have two read-only properties:

  • Size: indicates the size of binary data, in bytes.
  • Type: MIME type of binary data, all lowercase, empty string if the type is unknown. In Ajax operations, if xhr.responseType is set to BLOb, binary data is received.

    The Blob constructor generates a Blob object

The Blob constructor, which takes two arguments. The first argument is an array containing the actual data, and the second argument is the type of the data, neither of which is required. Array elements can be any number of ArrayBuffer, ArrayBufferView (typed array), Blob, or DOMString objects. Such as:

var arr = ['<h1>hello world</h1>'];
var blob = new Blob(arr, { "type" : "text/xml" }); // the blob
console.log(blob);
Copy the code

The effect is as follows:

Create the download file in the browser with JS

In many front-end projects, there are file download requirements, especially JS to generate file content, and then let the browser perform download operations (such as online picture editing, online code editing, iPresst, etc.) but limited by the browser, in many cases we can only give a link, let the user click open – “save as. Here’s the link:

<a href="file.js">file.js</a>
Copy the code

When the user clicks on the link, the browser opens and displays the content of the file to which the link points, which obviously doesn’t work. HTML5 has added a download attribute to the A TAB. With this attribute, when you click on a link, the browser does not open the file to which the link points, but instead downloads it (currently only supported by Chrome, Firefox and Opera). Download =”not a-file.js”; download=”not a-file.js”; download=”not a-file.js” But this is not enough, the above method is only suitable for the file is on the server. If the content is generated by JS in the browser, how do you want the browser to download it? DataURI can do this, but the file type of DataURI is limited, so we can work around implementing bloB objects here.

<a id="aLink"> download </a> <script type="text/javascript"> content) { var aLink = document.querySelector(el); var blob = new Blob([content]); aLink.download = fileName; aLink.href = URL.createObjectURL(blob); } document.querySelector('#aLink').addEventListener('click',function () { downloadFile('#aLink', 'hello.txt', '<h1>hello world</h1>'); }) </script>Copy the code

The slice method of a Blob object generates a Blob object

The slice method of a Blob object, which blocks binary data into bytes and returns a new Blob object.

var newBlob = oldBlob.slice(startingByte, endindByte);
Copy the code

Here is an example of splitting a large file to upload using an XMLHttpRequest object.

function upload(blobOrFile) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };
  xhr.send(blobOrFile);
}

document.querySelector('input[type="file"]').addEventListener('change', function(e) {
  var blob = this.files[0];

  const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
  const SIZE = blob.size;

  var start = 0;
  var end = BYTES_PER_CHUNK;

  while(start < SIZE) {
    upload(blob.slice(start, end));

    start = end;
    end = start + BYTES_PER_CHUNK;
  }
}, false);
Copy the code