Introduction détaillée au type d'objet Blob dans js

Il existe généralement trois façons de construire un objet Blob :

1. Construisez-le via le constructeur de l'objet Blob.

2. Appelez l'interface slice à partir de l'objet Blob existant pour découper un nouvel objet Blob.

3. La méthode toBlob de l'API canevas convertit les informations de dessin actuelles en un objet Blob. Regardons simplement la première implémentation :

Utilisation : Nouvelle méthode pour créer des objets Blob (construits par le constructeur)

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

Constructeur, accepte deux paramètres

Premiers paramètres : C'est une séquence de données, qui peut être une valeur dans n'importe quel format, par exemple n'importe quel nombre de chaînes, Blobs et ArrayBuffers.

Le deuxième paramètre : permet de préciser le type de données à placer dans le Blob (MIME) (le backend peut obtenir le type correspondant en énumérant MimeType :

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

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

Blob Basic attributs de l'objet :

size : Le nombre d'octets contenus dans l'objet Blob. (Lecture seule)

type : Le type de données MIME contenu dans l'objet Blob. inconnu, une chaîne vide est renvoyée

Construction d'objet natif Blob

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

Erreur d'invite :

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

La raison est que le constructeur Blob exige que le premier paramètre soit un. tableau, et le premier paramètre ici n'est ni un tableau, ni un attribut indexable. Puisque les attributs indexables des objets sont mentionnés ici, cela me rappelle le concept de tableau, et Arguments en est un bon exemple :

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

. Oui. Étant donné que même s'il s'agit d'un objet de type tableau et que le type d'élément du tableau est Number, la conclusion correcte peut être tirée parce que le constructeur convertit Number en String à l'intérieur de

. sinon ! Type de paramètre :

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 est égal à application/json. La longueur après la conversion de arg en chaîne est de 16 plus la largeur du caractère de tabulation t est de 4 octets, ce qui est égal à 20. .>
Méthodes de base des objets Blob :

Découpage de fichiers volumineux (méthode slice()), la méthode slice est similaire à la méthode slice du tableau. La méthode

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

slice() accepte. trois paramètres. Le décalage de début, le décalage de fin et le type MIME facultatif Si le type MIME n'est pas défini, le type MIME du nouvel objet Blob est le même que celui du parent

lors du téléchargement de fichiers volumineux. très utile. Vous pouvez diviser un gros fichier en segments et les télécharger séparément, car l'objet Blob divisé existe indépendamment de l'original

Cependant, il n'existe actuellement aucune implémentation unifiée de cette méthode par les navigateurs, Firefox. utilise mozSlice(), Chrome utilise webkitSlice() et d'autres navigateurs utilisent la méthode normale slice()

Vous pouvez écrire une méthode compatible avec chaque navigateur :

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

Utilisez Blob pour afficher les vignettes

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

Utilisez Blob pour afficher les vignettes

rrreee

Étant donné que l'objet File hérite de Blob, nous pouvons facilement utiliser l'objet File pour charger le fichier image du système local et générer une URL via createObjectURL et l'afficher :

Tutoriel js

<.>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!