У меня есть входной файл: (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?
p.s.
mdn объяснение о URL.createObjectURL не помогает мне, когда я должен использовать каждый.