API File de Html5 - Utilisations BLOB?

J'ai un fichier d'entrée : (jsbin)

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

Qui , une fois le fichier sélectionné, affiche les images de petite taille de l'image sélectionnée :

Je peux le faire dans deux façons :

à l'aide de 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);
}
//...
}

à l'aide de 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);
}
}

Comme vous pouvez le voir , les deux travaux :

API File de Html5 - Utilisations BLOB?

MAIS

Le code html résultat est différent :

API File de Html5 - Utilisations BLOB?

Question :

Avec la première , je sais déjà ce que je peux faire , c'est de la pure data-uri de données.

Mais quand dois-je utiliser la deuxième approche(blob) ?
Je veux dire - ce que je peux faire blob:http%3A//run.jsbin.com/82b29cc5-8452-4ae2-80ca-a949898f4295 ?

p.s.
mdn explication sur URL.createObjectURL ne m'aide pas sur quand dois-je utiliser chaque.

source d'informationauteur Royi Namir

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *