Html5 的文件 API - BLOB 用法？

我有一个文件输入：(jsbin) http://jsbin.com/atICecog/4/edit

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

当选择文件时，会显示所选图像的小图像：

我可以做到two ways :

使用文件读取器：

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

如您所见，两者都有效：

BUT

html 结果不同：

问题 ：

有了第一个，我已经知道我能做什么，它很纯粹data-uri data.

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

p.s. mdn https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL#Browser_compatibility关于的解释URL.createObjectURL对我什么时候应该使用它们没有帮助。

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

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

Also, you can directly recover data from a blob: URL ^{(provided that the blob has not been revoked yet, e.g. because the document was unloaded, and the same origin policy is not violated)} using XMLHttpRequest. For example, the following code gets the content of a blob URL as text:

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，使用 a 确实没有意义blob: or data: URL。只需提交File直接使用对象FormData https://developer.mozilla.org/en-US/docs/Web/API/FormData目的。如果你丢失了原件File参考，而你只有一个blob:URL，然后您可以使用前面的代码片段来获取Blob再次使用对象FormData.

Given a data:-URL，恢复原始数据远非易事。 Firefox 和 Opera 12 - 允许使用data:-URL in XMLHttpRequest。 Chrome、Internet Explorer、Safari 和 Opera 15+ 拒绝通过 XMLHttpRequest 加载数据 URL。所以，关于恢复数据，blob:URL 也优于data:-URLs.

如果你想在同一个源的不同帧中显示文件的结果，一定要使用blob:网址。如果您想操作包含在Blob在不同的框架中（可能在不同的原点），不要使用 blob 或数据 URL，直接使用发送数据postMessage https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage.

blob:-URLs are generally better than data:-URLs for representing (binary) data. For small data (max 20kb), data: URLs might be a better choice because of the higher range of supported browsers: Compare Can I use Blob URLs http://caniuse.com/bloburls with Can I use Data URIs http://caniuse.com/datauri ^{(though if you're writing a complex HTML5 application, odds are that you're not going to support IE9-)}.