web-dev-qa-db-ja.com

HTML5のファイルAPI-BLOBの使用？

私はファイル入力を持っています： （jsbin）

 <input type="file"   accept="image/*" id="input" multiple   onchange='handleFiles(this)' />

ファイルを選択すると、選択した画像の小さな画像が表示されます。

私は2つの方法でそれを行うことができます：

FileReaderを使用：

function handleFiles(t) //t=this
{
    var fileList = t.files;
    for (var i = 0; i < fileList.length; i++)
    {
        var file = fileList[i];
        var img = document.createElement("img");
        img.style... = ...
        document.getElementById('body').appendChild(img);
        var reader = new FileReader();
        reader.onload = (function (aImg)
        {
            return function (e)
            {
                aImg.src = e.target.result;
            };
        })(img);
        reader.readAsDataURL(file);
    }
    // ...
}

ObjectURL/BLOBを使用：

 function handleFiles(t)
 {
     var fileList = t.files;
     for (var i = 0; i < fileList.length; i++)
     {
         var file = fileList[i];
         var img = document.createElement("img");
         img.src = window.URL.createObjectURL(file);
         img.onload = function (e)
         {
             window.URL.revokeObjectURL(this.src);
         }
         document.getElementById('body').appendChild(img);
     }
 }

ご覧のとおり、どちらも機能します。

enter image description here

[〜＃〜]しかし[〜＃〜]

HTMLの結果は異なります：

enter image description here

質問：

最初の1つで、私は何ができるかすでにわかっています。それは純粋なデータURIデータです。

しかし、2番目のアプローチ（blob）をいつ使用すればよいですか？つまり、何ができますかblob:http%3A//run.jsbin.com/82b29cc5-8452-4ae2-80ca-a949898f4295？

pS mdnURL.createObjectURLについての説明は、それぞれをいつ使用するべきかについて助けにはなりません。

javascripthtmlblobfileapi
20
Royi Namir

blob: URLの長さは常に妥当な制限を下回っています。

データURLは任意に大きくできます。その結果、データURLが長すぎる場合、一部のブラウザー（IE、cough）は画像を表示しなくなります。したがって、非常に大きなファイルを表示する場合は、blob:（またはfilesystem: URL）を使用する方が、データURLよりも意味がある場合があります。

また、blob: URLからデータを直接回復することもできます （ただし、ドキュメントがアンロードされたため、BLOBがまだ取り消されておらず、同じOriginポリシーに違反していない場合） XMLHttpRequestを使用します。たとえば、次のコードはblob URLのコンテンツをテキストとして取得します。

var blobUrl = URL.createObjectURL(new Blob(['Test'], {type: 'text/plain'}));
var x = new XMLHttpRequest();
// set x.responseType = 'blob' if you want to get a Blob object:
// x.responseType = 'blob';
x.onload = function() {
    alert(x.responseText);
};
x.open('get', blobUrl);
x.send();

XMLHttpRequestを使用してファイルのコンテンツをサーバーに送信する場合、blob:またはdata: URLを使用しても意味がありません。 File オブジェクトを使用して、FormDataオブジェクトを直接送信するだけです。元のFile参照を失い、blob: URLしかない場合は、前のスニペットを使用してBlobオブジェクトを再度取得し、FormDataで使用できます。

data:- URLを指定すると、元のデータを復元するのは簡単ではありません。 FirefoxおよびOpera 12- XMLHttpRequestでdata:- URLの使用を許可します。Chrome、Internet Explorer、SafariおよびOpera 15+はデータURLのロードを拒否しますXMLHttpRequest経由。したがって、データの回復に関しては、blob: URLよりもdata: URLのほうが優れています。

ファイルの結果を同じOriginの別のフレームに表示する場合は、blob: URLを必ず使用してください。 Blobに含まれるデータを別のフレームで（おそらく別のOriginで）操作したい場合blobやデータURLを使用しない、 postMessage を使用してデータを直接送信します。

（バイナリ）データを表す場合、blob:- URLは一般的にdata:- URLよりも優れています。小さいデータ（最大20 kb）の場合、サポートされているブラウザーの範囲が広いため、data: URLの方が適している可能性があります。比較 Blob URLを使用できます と データURIを使用できます （ただし、複雑なHTML5アプリケーションを作成している場合は、IE9をサポートしない可能性があります-）。

39
Rob W

2種類のURLの使い方の主な違いは次のとおりです。

データURL：

長所：

  • それらからデータを非常に簡単に取得できます
  • 別のユーザーに送信したり、HTTP経由で送信したりできますが、データはまだそこにあります
  • どこでどのように作成されたかは関係ありません。データが有効であれば、コンテンツはブラウザ、OS、場所を問わず表示されます

短所：

  • データURLは非常に長いことが多いため、IEはデータURLを処理できない可能性があり、どのブラウザでも扱い​​にくい場合があります。
  • BLOB URLよりも効率が悪い（ファイルを読み取って作成する必要がある、BLOBを使用しないなど）

BLOB URL：

長所：

  • データURLよりもはるかに短いため、はるかに管理しやすくなります。
  • データにアクセスできますが、URLはデータへの不透明な参照にすぎないため、FileReaderを使用してデータにアクセスする必要があり、データURLのようにデータをURLから直接抽出することはできません。
  • それらは適切な長さを持っているので、扱いやすく、より良いIEサポート

短所：

  • データはURL自体ではアクセスできず（URLは不透明な参照です）、クラウドに保存されていません
  • 詐欺＃1のため、データにアクセスできないため、サーバー/別のユーザーにURLを送信できません。したがって、URLはあなた専用です。
  • また、（同じマシン上であっても）別のブラウザーでBLOB URLからデータにアクセスすることもできません。
  • また、同じブラウザでも、別のオリジンからBLOB URLにアクセスできません

このリストにより、データURLの方が明らかに有利であるように見えますが、BLOB URLは作成が高速であり、他のユーザーまたはサーバーにURLを送信する必要がない限り、高速で使いやすいため、URLを使用する必要があります、より管理しやすく、IEに適しています。ただし、サーバーまたは別のユーザーにURLを送信する必要がある場合は、XHR2を使用してBLOBを直接送信することをお勧めします。データURLはそれほどすばらしいものではありません。

11
markasoftware