Detailed introduction to the Blob object type in js

There are usually three ways to construct a Blob object:

1. Construct it through the constructor of the Blob object.

2. Call the slice interface from an existing Blob object to cut out a new Blob object.

3. The canvas API toBlob method converts the current drawing information into a Blob object. Let’s just look at the first implementation:

Usage: New method to create a Blob object (constructed by constructor)

var blob = new Blob(array[optional], options[optional]);

Constructor, accepts two parameters

First Parameters: It is a data sequence, which can be a value in any format, for example, any number of strings, Blobs and ArrayBuffers.

The second parameter: used to specify the type of data to be placed in the Blob (MIME) (the backend can enumerate MimeType to obtain the corresponding type:

MimeType mimeType = MimeType.toEnum(file.getContentType());）。

 <script>
 var blob = new Blob(["Hello World!"],{type:"text/plain"});
 </script>

Blob Basic attributes of the object:

size: The number of bytes contained in the Blob object. (Read-only)

type: The data type MIME contained in the Blob object. If the type is unknown, an empty string is returned.

Native object construction Blob

<script type="text/javascript">
window.onload = function() {
 var blob = new Blob(1234);
}
</script>

Prompt error:

Uncaught TypeError: Failed to construct ‘Blob': The 1st argument is neither an array, nor does it have indexed properties.

The reason is that the Blob constructor requires that the first parameter must be an array, and the first parameter here is neither an Arrays also have no indexable properties. Since the indexable properties of objects are mentioned here, it reminds me of the concept of array-like, and Arguments is a good example. Let’s give it a try:

<script type="text/javascript">
function testArgumentsBlob() {
 var blob = new Blob(arguments);
 console.log(blob.size);//3
 console.log(blob.type);//""
}
window.onload = function() {
 testArgumentsBlob(1, 2, 3);
}
</script>

Yes Seeing that even if it is an array-like object and the array element type is Number, the correct conclusion can be drawn. I guess it is because the constructor converts Number into String inside the constructor!

Let’s try something else Parameter type:

window.onload = function() {
 var arg = {hello: "2016"};
 var blob = new Blob([JSON.stringify(arg, null, "\t")], {type: "application/json"});
 console.log(blob.type);//application/json
 console.log(blob.size);//20
}

blob.type is equal to application/json, no problem. The length of arg after being converted to a string is 16 plus the width of the tab character\t is 4 bytes equal to 20.

Basic methods of Blob objects:

Large file segmentation (slice() method), the slice method is similar to the slice of the array.

Blob.slice([start, [end, [content-type]]])

slice() method accepts three parameters , starting offset, ending offset, and optional mime type. If the mime type is not set, the mime type of the new Blob object is the same as the parent.

When uploading a large This method is very useful when working with files. You can split large files into segments and then upload them separately, because the split Blob object exists independently from the original one.

However, currently no browser has implemented this method. In unification, Firefox uses mozSlice(), Chrome uses webkitSlice(), and other browsers use the normal method slice()

You can write a method compatible with each browser:

 function sliceBlob(blob, start, end, type) {
 type = type || blob.type;
 if (blob.mozSlice) {
  return blob.mozSlice(start, end, type);
 } else if (blob.webkitSlice) {
  return blob.webkitSlice(start, end type);
 } else {
  throw new Error("This doesn't work!");
 }
 }

Use Blob to display thumbnails

var input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.multiple = true;
input.style.display = "none";
document.body.appendChild(input);

var fileSelect = document.createElement("a");
fileSelect.href = "#";
fileSelect.appendChild(document.createTextNode("Choose files"));
document.body.appendChild(fileSelect);

var imgList = document.createElement("div");
imgList.innerHTML = "<p>No file Selected!</p>"
document.body.appendChild(imgList);

input.addEventListener("change", function(e) {
var files = this.files;
if(!files.length) {
return;
}
imgList.innerHTML = "";
var list = document.createElement("ul");
imgList.appendChild(list);
for(var i = 0; i < files.length; i++) {
var li = document.createElement("li"); 
list.appendChild(li);

var img = document.createElement("img");
img.src = window.URL.createObjectURL(files[i]);
img.height = 60;
img.width = 60;
img.onload = function() {
window.URL.revokeObjectURL(this.src);
}
li.appendChild(img);
var info = document.createElement("span");
info.innerHTML = files[i].name + ":" + files[i].size + " bytes";
li.appendChild(info);
}
}, false);

fileSelect.addEventListener("click", function(e) {
input.click(); 
e.preventDefault();
}, false);

Since the File object inherits from Blob, we can easily use the File object to load the local system image file and generate a URL through createObjectURL and display it.

Recommended tutorial: js tutorial

The above is the detailed content of Detailed introduction to the Blob object type in js. For more information, please follow other related articles on the PHP Chinese website!