Использование файлов API - BLOB Html5?

у меня есть входной файл : (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);
     }
 }

как вы можете видеть, оба работают :

enter image description here

но

результат html отличается:

enter image description here

вопрос :

С первым , я уже знаю, что я могу сделать , это чистые данные-URI данных.

но когда я должен использовать второй подход (blob) ? Я имею в виду - что я могу сделать blob:http%3A//run.jsbin.com/82b29cc5-8452-4ae2-80ca-a949898f4295 ?

п.С. mdn объяснение URL.createObjectURL не поможет мне о том, когда я должен использовать каждый.

18
blob fileapi html5 javascript

2 ответов

длина blob: URL всегда ниже разумного предела.

URL-адреса данных могут быть произвольно большим. Следовательно, когда URL-адрес данных слишком длинный, некоторые браузеры (т. е. кашель) больше не будет отображать изображение. Итак, если вы хотите отобразить очень большие файлы, используя blob: (или filesystem: URLs) может иметь больше смысла, чем Data-URLs.

кроме того, вы можете напрямую восстановить данные из blob: URL-адресом (при условии, что blob не имеет был отозван еще, например, потому, что документ был выгружен, и та же политика происхождения не нарушена) используя XMLHttpRequest. Например, следующий код получает содержимое URL-адреса blob в виде текста:

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

36

вот основные различия в том, как вы можете использовать два типа адресов:

URL-Адреса Данных:

плюсы:

  • вы можете получить данные из них очень легко
  • вы можете отправить их другому пользователю или через HTTP, и данные все еще там
  • не имеет значения, где и как они были созданы, если данные действительны, вы увидите контент в любом браузере, на любой ОС, везде

плюсы:

  • URL-адреса данных часто являются запретительно длинными, так что IE не может обрабатывать их, и это может раздражать обрабатывать в любом браузере
  • они менее эффективны, чем Blob URLs (вы должны прочитать файл, чтобы создать его, вы не с BLOBs и т. д)

BLOB URLs:

плюсы:

  • они намного короче, чем URL-адреса данных, что делает их намного больше легкоуправляемый
  • вы можете получить доступ к своим данным, но так как URL-адрес является только непрозрачной ссылкой на данные, данные должны быть доступны с помощью FileReader и данные не могут быть извлечены непосредственно из URL-адреса, как в URL-адресах данных
  • потому что они имеют разумную длину, они легче иметь дело с и имеют лучшую поддержку IE

плюсы:

  • данные недоступны в самом URL-адресе (URL-адрес является непрозрачной ссылкой), и он не сохраняется на облаках
  • из-за con #1 Вы не можете отправить URL-адрес на сервер/другому пользователю, так как они не смогут получить доступ к данным. Так что URL только для вас.
  • вы также не можете получить доступ к данным из URL BLOB в другом браузере (даже на том же компьютере)
  • кроме того, вы не можете получить доступ к URL BLOB из другого источника, даже в том же браузере

этот список заставляет думать, что URL-адреса данных являются очевидным преимуществом, но URL-адреса BLOB создаются быстрее, и если вам не нужно отправлять url-адрес другим пользователям или серверу, вы должны использовать их, потому что они быстрее, проще в использовании, более управляемы и лучше подходят для IE. Но если вам нужно отправить url-адрес на сервер или другому пользователю, я бы рекомендовал как-то передать blob напрямую с помощью XHR2. URL-адреса данных не так уж хороши.

10