Detaillierte Einführung in den Blob-Objekttyp in js

Es gibt normalerweise drei Möglichkeiten, ein Blob-Objekt zu erstellen:

1. Konstruieren Sie es über den Konstruktor des Blob-Objekts.

2. Rufen Sie die Slice-Schnittstelle aus dem vorhandenen Blob-Objekt auf, um ein neues Blob-Objekt auszuschneiden.

3. Die toBlob-Methode der Canvas-API konvertiert die aktuellen Zeichnungsinformationen in ein Blob-Objekt. Schauen wir uns einfach die erste Implementierung an:

Verwendung: Neue Methode zum Erstellen von Blob-Objekten (konstruiert vom Konstruktor)

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

Konstruktor, akzeptiert zwei Parameter

Erste Parameter: Das ist es eine Datensequenz, die ein Wert in einem beliebigen Format sein kann, beispielsweise eine beliebige Anzahl von Zeichenfolgen, Blobs und ArrayBuffern.

Der zweite Parameter: wird verwendet, um den Datentyp anzugeben, der im Blob platziert werden soll (MIME) (das Backend kann den entsprechenden Typ durch Auflisten von MimeType erhalten:

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

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

Blob Basic). Attribute des Objekts:

Größe: Die Anzahl der im Blob-Objekt enthaltenen Bytes (schreibgeschützt)

Typ: Der im Blob-Objekt enthaltene Datentyp unbekannt, eine leere Zeichenfolge wird zurückgegeben

Native Objektkonstruktion Blob

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

Eingabeaufforderungsfehler:

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

Der Grund dafür ist, dass der Blob-Konstruktor erfordert, dass der erste Parameter ein sein muss Array, und der erste Parameter hier ist weder ein Array noch ein indizierbares Attribut. Da hier die indizierbaren Attribute von Objekten erwähnt werden, erinnert es mich an das Konzept von Arrays und Argumente sind ein gutes Beispiel:

<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>

Ja. Selbst wenn es sich um ein Array-ähnliches Objekt handelt und der Array-Elementtyp „Number“ ist, kann dies meiner Meinung nach daran liegen, dass der Konstruktor „Number“ in „String“ konvertiert Sonst! Parametertyp:

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 ist gleich application/json. Die Länge von arg nach der Konvertierung in einen String beträgt 16 plus die Breite des Tabulatorzeichens t, also 4 Bytes >

Grundlegende Methoden von Blob-Objekten:

Aufteilung großer Dateien (Slice()-Methode), die Slice-Methode ähnelt dem Array-Slice Das

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

slice(). Die Methode akzeptiert drei Parameter: Startoffset, Endoffset und optionaler MIME-Typ. Wenn der MIME-Typ des neuen Blob-Objekts beim Hochladen großer Dateien identisch ist Die Methode ist sehr nützlich. Sie können eine große Datei in Segmente aufteilen und diese separat hochladen, da das geteilte Blob-Objekt unabhängig vom Original existiert.

Es gibt jedoch derzeit keine einheitliche Implementierung dieser Methode durch Browser. , Firefox verwendet mozSlice(), Chrome verwendet webkitSlice() und andere Browser verwenden die normale Methode Slice()

Sie können eine Methode schreiben, die mit jedem Browser kompatibel ist:

 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!");
 }
 }

Verwenden Sie Blob zur Anzeige Miniaturansichten

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);

Da das File-Objekt von Blob erbt, können wir das File-Objekt problemlos verwenden, um die lokale Systembilddatei zu laden und über createObjectURL eine URL zu generieren und diese anzuzeigen:

js-Tutorial

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in den Blob-Objekttyp in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!