Html5 的文件 API - BLOB 用法？

Question

我有一个文件输入： （ jsbin ）

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

Which, when file selected, shows small images of the selected image:

我可以通过两种方式做到这一点：

使用文件阅读器：

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

如您所见，两者都有效：

但是

html 结果不同：

问题：

对于第一个，我已经知道我可以做什么，它是纯粹的data-uri数据。

但是我什么时候应该使用第二种方法（blob）？ 我的意思是 - 我能做什么blob:http%3A//run.jsbin.com/82b29cc5-8452-4ae2-80ca-a949898f4295 ？

ps mdn关于URL.createObjectURL解释并不能帮助我了解何时应该使用每个。

Answer 1

blob: URL 的长度始终低于合理限制。

数据 URL 可以是任意大的。 因此，当数据 URL 太长时，某些浏览器（IE、 cough ）将不再显示图像。 因此，如果您想显示非常大的文件，使用blob:或filesystem: URL）可能比数据 URL 更有意义。

---

此外，您可以使用XMLHttpRequest直接从blob: URL 恢复数据^{（假设 blob 尚未被撤销，例如因为文档已卸载，并且未违反同源策略）} 。 例如，以下代码以文本形式获取 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将 File 的内容提交到服务器，则使用blob:或data: URL 没有任何意义。 只需使用FormData对象直接提交File对象。 如果您丢失了原始File引用，并且您只有一个blob: URL，那么您可以使用前面的代码段再次获取Blob对象以在FormData使用。

给定一个data: -URL，恢复原始数据远非易事。 Firefox 和 Opera 12- 允许使用data: -URL in XMLHttpRequest 。 Chrome、Internet Explorer、Safari 和 Opera 15+ 拒绝通过 XMLHttpRequest 加载数据 URL。 因此，在恢复数据方面， blob: URL 也优于data: -URL。

如果要在同一来源的不同帧中显示文件的结果，请务必使用blob: URL。 如果您想在不同的框架（可能在不同的来源）中操作包含在Blob中的数据，请不要使用 blob 或数据 URLs ，直接使用postMessage发送数据。

blob: -URL 通常比data:更好data: -用于表示（二进制）数据的 URL。 对于小数据（最大 20kb）， data: URLs 可能是更好的选择，因为支持的浏览器范围更广：比较Can I use Blob URLs和Can I use Data URIs ^{（尽管如果你正在编写一个复杂的 HTML5 应用程序，赔率是你不会支持 IE9-)} 。

Answer 2

以下是您如何使用这两种类型的 URL 的主要区别：

数据网址：

优点：

• 你可以很容易地从中获取数据
• 您可以将它们发送给另一个用户或通过 HTTP，并且数据仍然存在
• 无论它们是在何处或如何创建的，如果数据有效，您将在任何浏览器、任何操作系统、任何地方看到这些内容

缺点：

• 数据 URL 通常长得令人望而却步，因此 IE 可能无法处理它们，并且在任何浏览器中处理都会变得烦人
• 它们比 BLOB URL 效率低（您必须读取文件才能创建它，而不使用 BLOB 等）

BLOB 网址：

优点：

• 它们比数据 URL 短得多，使它们更易于管理
• 您可以访问他们的数据，但由于 URL 只是对数据的不透明引用，因此必须使用FileReader访问数据，并且不能直接从 URL 中提取数据，如 Data URLs
• 因为它们有合理的长度，所以更容易处理并且有更好的 IE 支持

缺点：

• URL 本身中的数据不可访问（URL 是一个不透明的引用）并且它没有存储在云中
• 由于 con #1，您无法将 URL 发送到服务器/其他用户，因为他们将无法访问数据。 因此，该 URL 仅供您使用。
• 您也无法在不同的浏览器中访问来自 BLOB URL 的数据（即使在同一台机器上）
• 此外，即使在同一浏览器上，您也无法访问来自不同来源的 BLOB URL

这个列表使数据 URL 看起来是一个明显的优势，但 BLOB url 创建速度更快，并且，除非您需要将 url 发送给其他用户或服务器，否则您应该使用它们，因为它们更快、更易于使用，更易于管理，更适合 IE。 但是，如果您确实需要将 url 发送到服务器或其他用户，我会建议以某种方式直接使用 XHR2 传输 blob。 数据网址不是很好。