API de fichiers HTML5: récupère l'objet File dans le rappel FileReader

Avec le nouveau Fichier API en Javascript, vous pouvez lire des fichiers en Javascript pour créer dataURLs pour montrer infoclient images côté client. Je me demandais si vous pouvez atteindre le Fichier objet dans le FileReader onload de rappel.
Je vais illustrer cela par un exemple:

var div = document.createElement('div'); 
div.ondrop = function(e) { 
e.preventDefault(); 
e.stopPropagation(); 
var files = e.dataTransfer.fichiers; 
for ( var i=0; i<fichiers.longueur; i++ ) { 
var fichier = files[i]; //c'est le fichier que je veux!!!! 
var filereader = new FileReader(); 
filereader.onload = function(e) { 
c'; //l'objet FileReader 
e.cible; //le même objet FileReader 
c'.result; //le dataURL, quelque chose comme données:image/jpeg;base64,..... 
var img = document.createElement('img'); 
img.src = ce.résultat; 
img.title = fichier.nom de fichier; //ne fonctionne pas 
document.appendChild(img); 
} 
} 
return false; 
}

Ce que je pouvais faire - ce que je fais en ce moment - est de conclure le contenu de la boucle for dans une fonction, et de l'exécuter pour créer un nouveau champ d'application et de garder un fichier dans ce champ d'application comme suit:

 for ( var i=0; i<fichiers.longueur; i++ ) { 
var _file = files[i]; //c'est le fichier que je veux!!!! 
(function(fichier) { 
//faire FileReader trucs ici 
})(_file); 
}

Je me demandais juste... Peut-être que je suis absent quelque chose. Est-il possible d'obtenir le Fichier d'objet dans le onload de la fonction de la FileReader? Les deux this et e.target sont l'objet FileReader et non pas le Fichier. Est-il quelque chose dans this ou e que le Fichier est-il?? Je ne le trouve pas 🙁

Merci beaucoup.

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

source d'informationauteur Rudie

  1. 24

    J'ai déjà trouvé un moyen. Peut-être pas mieux que la portée wrapper, mais je pense que c'est plus lisible:

    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) moyen (synchronisation!) pour obtenir un fichier de données de l'URL:

    img.src = URL.createObjectURL(file);

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

  2. -1

    Je ne pense pas que ce.le fichier est toujours pris en charge. Lorsque j'essaie d'exécuter le code de réponse, ce.le fichier n'est pas défini, alors que, si j'exécute le code à partir de la question-je obtenir les résultats escomptés. Je pense que vous devez utiliser de la fermeture (au moins c'est comment ils le font sur html5rocks (Exemple)).