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.