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

blob fileapi html5 javascript

34

La longueur d'un blob: URL est toujours au-dessous d'une limite raisonnable.

De données d'Url peut être arbitrairement grand. Par conséquent, lorsque les données de l'URL est trop longue, certains navigateurs (IE, toux) n'affiche pas l'image. Donc, si vous voulez afficher des fichiers de très grande taille, à l'aide de blob: (ou filesystem: Url) pourrait faire plus de sens que de données d'Url.

Aussi, vous pouvez directement récupérer des données à partir d'un blob: URL ^{(à condition que le blob n'a pas été révoquée encore, par exemple, parce que le document a été déchargé, et de la même origine que la politique n'est pas violée)} à l'aide de XMLHttpRequest. Par exemple, le code suivant renvoie le contenu d'une goutte d'URL sous forme de texte:
```
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();
```
Si vous souhaitez soumettre le contenu d'un Fichier à un serveur à l'aide de XMLHttpRequestil n'a pas vraiment de sens d'utiliser un blob: ou data: URL. Il vous suffit de soumettre le File objet directement à l'aide de la FormData objet. Si vous avez perdu l'original File de référence, et vous avez seulement un blob: URL, vous pouvez utiliser l'extrait précédent pour obtenir un Blob l'objet de nouveau pour une utilisation dans FormData.

Donné un data:-URL, il est loin d'être facile de récupérer les données d'origine. Firefox et Opera 12 - permettre l'utilisation d'un data:-URL dans XMLHttpRequest. Chrome, Internet Explorer, Safari et Opera 15+ refuser de charger des données d'URL via XMLHttpRequest. Donc, par rapport à la récupération de données, blob: les URLs sont de qualité supérieure plus data:-Url.

Si vous voulez afficher le résultat d'un Fichier dans une image différente sur la même origine, certainement utiliser un blob: URL. Si vous voulez manipuler les données contenues dans un Blob dans un cadre fait (peut-être sur une autre origine), ne pas utiliser de goutte ou de données Urlenvoyer les données directement à l'aide de postMessage.

blob:-Les url sont généralement mieux que data:-Url pour les représentant (binaire) de données. Pour les données de petite taille (max 20 ko), data: Url peut être un meilleur choix en raison de l'augmentation de la gamme de navigateurs pris en charge: Comparer Puis-je utiliser Blob Url avec Puis-je utiliser les Données Uri ^{(si vous êtes en train de rédiger un complexe application HTML5, les chances sont que vous n'allez pas à l'appui de IE9-)}.
9

Voici les principales différences dans la façon dont vous pouvez utiliser les deux types d'Url:

De Données Url:

Pour:
- vous pouvez obtenir des données très facilement
- vous pouvez les envoyer à un autre utilisateur ou à travers le protocole HTTP, et les données est toujours là
- Il n'importe pas où ou comment ils ont été créés, si les données sont valides, vous verrez le contenu dans n'importe quel navigateur, sur n'importe quel OS, n'importe où
Contre:
- De données des Url sont souvent trop longue, de sorte que IE pourrait ne pas être en mesure de les gérer et il peut devenir ennuyeux à manipuler dans n'importe quel navigateur
- Ils sont moins efficace que le BLOB de l'Url (vous avez qu'à lire le fichier à créer, vous n'avez pas avec des Gouttes, etc)
BLOB Url:

Pour:
- Ils sont beaucoup plus courts que les Données Url, ce qui les rend beaucoup plus facile à gérer
- vous pouvez accéder à leurs données, mais depuis l'URL n'est qu'un opaque de référence pour les données, les données doivent être accessibles à l'aide d'un FileReader et les données ne peuvent pas être extraites directement à partir de l'URL, comme dans les Données d'Url
- parce qu'ils ont une longueur raisonnable, ils sont plus faciles à gérer et à mieux IE soutien
Contre:
- Les données n'est pas accessible à l'URL (l'URL est opaque référence) et il n'est pas stockée dans le cloud
- En raison de con #1, vous ne pouvez pas envoyer l'adresse URL du serveur/utilisateur différent, comme ils le seront dans l'impossibilité d'accéder aux données. Si l'URL est seulement pour vous.
- Vous aussi vous ne pouvez pas accéder aux données de la GOUTTE d'URL dans un navigateur différent (même sur la même machine)
- Aussi, vous ne parvenez pas à accéder à un BLOB URL à partir d'une origine différente, même sur le même navigateur
Cette liste donne l'impression de données d'Url sont un avantage évident, mais BLOB url sont plus rapides à créer, et, sauf si vous avez besoin d'envoyer l'url à d'autres utilisateurs ou sur le serveur, vous devez les utiliser parce qu'ils sont plus rapides, plus faciles à utiliser, plus faciles à gérer, et mieux pour IE. Mais si vous avez besoin d'envoyer une url pour le serveur ou à un autre utilisateur, je vous recommande en quelque sorte la transmission de la goutte directement à l'aide de XHR2. Les données d'url ne sont pas super.

Vous devez vous connecter pour publier un commentaire.