HTML5 API File: get objet fichier à l'intérieur rappel FileReader

Question

Avec la nouvelle API de fichier en Javascript, vous pouvez lire les fichiers Javascript pour créer dataURLs pour montrer des images clientside clientside. Je me demande si vous pouvez atteindre l'objet de fichier dans le callback de onload FileReader. Je vais illustrer cela par un exemple:

var div = document.createElement('div');
div.ondrop = function(e) {
  e.preventDefault();
  e.stopPropagation();
  var files = e.dataTransfer.files;
  for ( var i=0; i<files.length; i++ ) {
    var file = files[i]; // this is the file I want!!
    var filereader = new FileReader();
    filereader.onload = function(e) {
      this; // the FileReader object
      e.target; // the same FileReader object
      this.result; // the dataURL, something like data:image/jpeg;base64,.....
      var img = document.createElement('img');
      img.src = this.result;
      img.title = file.fileName; // This won't be working
      document.appendChild(img);
    }
  }
  return false;
}

Qu'est-ce que je pouvais faire - ce que je fais en ce moment - est envelopper le contenu de la boucle dans une fonction et d'exécuter pour créer un nouveau champ d'application et de garder un fichier dans ce champ comme ceci:

  for ( var i=0; i<files.length; i++ ) {
    var _file = files[i]; // this is the file I want!!
    (function(file) {
      // do FileReader stuff here
    })(_file);
  }

Je me demandais ... Peut-être que je manque quelque chose. Y at-il un moyen d'obtenir l'objet de fichier à partir de la fonction onload du FileReader? Les deux this et e.target sont l'objet FileReader et non le fichier. Y at-il quelque chose dans this ou e qui est le fichier ?? Je ne peux pas le trouver: (

Merci un groupe.

PS. Un violon: http://jsfiddle.net/rudiedirkx/ZWMRd/1/

Answer 1

Je l'ai déjà trouvé un moyen. Peut-être pas mieux que l'emballage de la portée, mais je pense qu'il est plus propre:

for ( var i=0; i<files.length; i++ ) {
    var file = files[i]; // this is the file I want!!
    var filereader = new FileReader();
    filereader.file = file;
    filereader.onload = function(e) {
        var file = this.file; // there it is!
        // do stuff
    }
}

Il est maintenant beaucoup plus facile (apparemment plus rapide) façon (synchronisation!) Pour obtenir l'URL de données d'un fichier:

img.src = URL.createObjectURL(file);

Démo http://jsfiddle.net/rudiedirkx/ZWMRd/8/show/ des deux méthodes, et le problème d'origine illustré (faites glisser plusieurs images et vérifier les info-bulles de titre).

Answer 2

Je ne pense pas this.file est toujours pris en charge. Lorsque je tente d'exécuter le code de réponse, this.file est pas défini alors que si je lance le code de la question que je reçois les résultats escomptés. Je pense que vous devez utiliser la fermeture (au moins c'est comment ils le font sur HTML5Rocks ( Exemple )).