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

王林
リリース: 2020-04-20 09:22:49
転載
3265 人が閲覧しました

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());)。
ログイン後にコピー
ログイン後にコピー

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

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

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

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

ログイン後にコピー

プロンプト エラー:

Uncaught TypeError: Failed to construct ‘Blob': The 1st argument is neither an array, nor does it have indexed properties.
ログイン後にコピー

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

ログイン後にコピー

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

No file Selected!

" 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:jb51.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!