js の Blob オブジェクト タイプの詳細な紹介

Blob オブジェクトを構築するには通常 3 つの方法があります:

1. Blob オブジェクトのコンストラクターを使用して構築します。

2. 既存の Blob オブジェクトからスライス インターフェイスを呼び出して、新しい Blob オブジェクトを切り出します。

3. Canvas API の toBlob メソッドは、現在の描画情報を Blob オブジェクトに変換します。最初の実装を見てみましょう:

使用法: Blob オブジェクトを作成する新しいメソッド (コンストラクターによって構築)

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

Constructor、2 つのパラメーターを受け取ります

最初のパラメーター: Itはデータ シーケンスであり、任意の数の文字列、Blob、ArrayBuffers など、任意の形式の値を指定できます。

2 番目のパラメーター: BLOB (MIME) に配置されるデータのタイプを指定するために使用されます (バックエンドは MimeType を列挙して、対応するタイプを取得できます:

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

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

Blob Basicオブジェクトの属性:

size: Blob オブジェクトに含まれるバイト数 (読み取り専用)

type: Blob オブジェクトに含まれるデータ型 MIME。タイプが不明な場合、空の文字列が返されます。

ネイティブ オブジェクト構築 Blob

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

プロンプト エラー:

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

理由は、Blob コンストラクターでは最初のパラメーターが配列であり、ここの最初のパラメータはどちらでもありません 配列にもインデックス可能なプロパティはありません。ここではオブジェクトのインデックス可能なプロパティについて言及しているので、配列のような概念を思い出させます。Arguments が良い例です。試してみましょう:

<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 配列状のオブジェクトで配列要素の型が Number であっても正しい結論が導けるのを見ると、コンストラクタ内で Number を String に変換しているからだと思います！

何か他のものを試してみましょう パラメータの種類:

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 は application/json と同じです。問題ありません。文字列に変換された後の arg の長さは、16 に文字列の幅を加えたものです。タブ文字\t は 4 バイトで 20 に相当します。

Blob オブジェクトの基本メソッド:

ラージ ファイル セグメンテーション (slice() メソッド)。スライス メソッドはスライスに似ています。配列の

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

slice() メソッドは、開始オフセット、終了オフセット、オプションの MIME タイプの 3 つのパラメータを受け入れます。MIME タイプが設定されていない場合、新しい Blob オブジェクトの MIME タイプは次と同じになります。

大きなファイルをアップロードする場合 このメソッドは、ファイルを操作するときに非常に便利です。分割された Blob オブジェクトは元の Blob オブジェクトとは独立して存在するため、大きなファイルをセグメントに分割して個別にアップロードできます。

ただし、現在このメソッドを実装しているブラウザはありません。統合では、Firefox は mozSlice() を使用し、Chrome は webkitSlice() を使用し、その他のブラウザは通常のメソッド slide() を使用します

メソッドを作成できます各ブラウザとの互換性:

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

Blob を使用してサムネイルを表示

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

File オブジェクトは Blob から継承しているため、File オブジェクトを使用してローカル システム イメージ ファイルをロードし、URL を生成することが簡単にできます。 createObjectURL を実行して表示します。

推奨チュートリアル: js チュートリアル

以上がjs の Blob オブジェクト タイプの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。