Html5的文件API - BLOB使用？ [英] Html5's File API - BLOB usages?

问题描述

我有一个文件输入：关于<$的解释c $ c> URL.createObjectURL 对我何时应该使用它们没有帮助。

解决方案

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

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

---

此外，您可以直接从 blob恢复数据： URL ^{（假设blob尚未被撤销，例如因为文档已被卸载，并且未违反相同的原始策略）}使用 XMLHttpRequest 。例如，以下代码将blob URL的内容作为文本获取：

  var blobUrl = URL.createObjectURL（new Blob（ ['Test']，{type：'text / plain'}））; 
 var x = new XMLHttpRequest（）; 
 //如果你想得到一个Blob对象，设置x.responseType ='blob'：
 // x.responseType ='blob'; 
 x.onload = function（）{
 alert（x.responseText）; 
}; 
 x.open（'get'，blobUrl）; 
 x.send（）; 
  

如果要使用<$ c $将文件内容提交到服务器c> XMLHttpRequest ，使用 blob：或数据是没有意义的：网址。只需使用文件对象noreferrer> FormData 对象。如果您丢失了原始文件引用，并且只有 blob： URL，那么您可以使用上一个代码段再次获得 Blob 对象，以便在 FormData 中使用。

给定数据： -URL，恢复原始数据并不容易。 Firefox和Opera 12-允许在 XMLHttpRequest 中使用数据： -URL。 Chrome，Internet Explorer，Safari和Opera 15+拒绝通过XMLHttpRequest加载数据网址。因此，关于恢复数据， blob：网址也优于数据： -URLs。

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

blob： -URL通常优于 data： -URL用于表示（二进制）数据。对于小数据（最大20kb），数据：由于支持的浏览器范围较广，URL可能是更好的选择：比较我可以使用Blob URL 和我可以使用数据URI ^{（虽然如果你正在编写一个复杂的HTML5应用程序，很可能你不会支持IE9 - ）}。

I have a file input : (jsbin)

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

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

I can do it in two ways :

using 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);
    }
    // ...
}

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

As you can see , both work :

BUT

The html result is different :

Question :

With the first one , I already know what I can do , it's pure data-uri data.

But when should I use the second approach(blob) ? I mean - what can I do blob:http%3A//run.jsbin.com/82b29cc5-8452-4ae2-80ca-a949898f4295 ?

p.s. mdn explanation about URL.createObjectURL doesn't help me about when should I use each.

解决方案

The length of a blob: URL is always below a reasonable limit.

Data URLs can be arbitrary large. Consequently, when a data URL is too long, some browsers (IE, cough) will not display the image any more. So, if you want to display very large files, using blob: (or filesystem: URLs) might make more sense than data-URLs.

---

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

If you want to submit the contents of a File to a server using XMLHttpRequest, it doesn't really make sense to use a blob: or data: URL. Just submit the File object directly using the FormData object. If you lost the original File reference, and you only have a blob: URL, then you can use the previous snippet to get a Blob object again for use in FormData.

Given a data:-URL, it is far from easy to recover the original data. Firefox and Opera 12- allow use of a data:-URL in XMLHttpRequest. Chrome, Internet Explorer, Safari and Opera 15+ refuse to load a data-URL via XMLHttpRequest. So, with respect to recovering data, blob: URLs are also superior over data:-URLs.

If you want to display the result of a File in a different frame on the same origin, definitely use a blob: URL. If you want to manipulate data contained in a Blob in a differerent frame (possibly on a different origin), do not use blob or data URLs, send the data directly using 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 with Can I use Data URIs ^{(though if you're writing a complex HTML5 application, odds are that you're not going to support IE9-)}.

这篇关于Html5的文件API - BLOB使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！