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:

我可以通过两种方式：

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

如您所见，两者都有效：

但是

html结果不同：

问题：

有了第一个，我已经知道我能做什么了，它是纯 data-uri 数据。

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

附言 mdn 关于 URL.createObjectURL 的解释并不能帮助我了解何时应该使用它们。

Answer 1

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

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

---

另外，您可以直接从blob: URL 恢复数据^{（前提是该 blob 尚未被撤销，例如因为文档已卸载，并且没有违反同源策略）}使用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 是没有意义的。只需使用FormData 对象直接提交File 对象即可。如果你丢失了原来的File 引用，而你只有一个blob: URL，那么你可以使用之前的sn-p 再次获取一个Blob 对象，以便在FormData 中使用。

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

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

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

Answer 2

以下是使用这两种 URL 的主要区别：

数据 URL：

优点：

• 您可以非常轻松地从中获取数据
• 您可以将它们发送给其他用户或通过 HTTP，并且数据仍然存在
• 无论它们是在何处或如何创建的，只要数据有效，您就可以在任何浏览器、任何操作系统、任何地方看到内容

缺点：

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

BLOB 网址：

优点：

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

缺点：

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

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