Html5的文件API - BLOB使用？

Question

我有一个文件输入: (jsbin)

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

选择文件时,显示所选图像的小图像:

我可以用两种方式做到:

使用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结果不同:

题 :

第一个,我已经知道我能做什么,它是纯粹的数据 - uri数据.

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

ps mdn解释关于URL.createObjectURL什么时候我不应该使用每个.

Answer 1

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

数据URL可以是任意大的.因此,当数据URL太长时,某些浏览器(IE,咳嗽)将不再显示图像.因此,如果要显示非常大的文件,使用blob:(或filesystem:URL)可能比数据URL更有意义.

此外,您还可以直接从恢复数据blob:URL ^{(前提是一滴尚未撤销,例如,由于该文件是卸载,同源策略不被破坏)}使用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-允许使用data:-URL XMLHttpRequest.Chrome,Internet Explorer,Safari和Opera 15+拒绝通过XMLHttpRequest加载数据网址.因此,关于恢复数据,blob:URL也优于data:-URL.

如果要在同一原点的不同帧中显示文件的结果,请务必使用blob:URL.如果要操纵Blob不同帧中的数据(可能位于不同的源),请不要使用blob或数据URL,直接使用发送数据postMessage.

blob:-URL通常比data:-URL 更好地表示(二进制)数据.对于小型数据(最大20KB),data:网址可能是一个更好的选择,因为较高的范围内支持的浏览器,即比较我可以用一滴的网址与我可以使用数据的URI ^{(不过,如果你正在写一个复杂的HTML5应用程序,赔率是,你不会支持IE9-)}.

Answer 2

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

数据网址:

优点:

• 你可以很容易地从中获取数据
• 您可以将它们发送给其他用户或通过HTTP,数据仍然存在
• 它们在何处或如何创建无关紧要,如果数据有效,您将在任何浏览器,任何操作系统,任何地方看到内容

缺点:

• 数据URL通常过长,因此IE可能无法处理它们,并且在任何浏览器中处理都会很烦人
• 它们的效率低于BLOB URL(您必须读取文件才能创建它,不使用BLOB等)

BLOB网址:

优点:

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

缺点:

• URL本身无法访问数据(URL是不透明的引用),并且它不存储在云中
• 由于con#1,您无法将URL发送到服务器/其他用户,因为他们将无法访问数据.所以URL只适合你.
• 您也无法在其他浏览器中访问BLOB URL中的数据(即使在同一台计算机上)
• 此外,即使在同一浏览器上,您也无法从其他来源访问BLOB URL

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