HTML5 API del archivo: obtener el objeto de devolución de llamada de archivos dentro de FileReader

Question

Con la nueva API de archivos en Javascript puede leer archivos en Javascript para crear dataURLs para mostrar clientside imágenes del lado del cliente. Me pregunto si puedes alcanzar el objeto File dentro de la devolución de llamada en onload del FileReader. Voy a ilustrar esto con un ejemplo:

 
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; 
} 

lo que podría hacer - lo que hago en este momento - es envolver el contenido del bucle for de una función y ejecutarlo para crear un nuevo ámbito de aplicación y mantener un archivo en ese alcance como tal:

 
    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); 
    } 

Me preguntaba ... Tal vez me falta algo. ¿Hay alguna forma de obtener el objeto File desde la función onload del FileReader? Ambos this y e.target son el objeto FileReader y no el archivo. ¿Hay algo en this o e que sea el archivo? Yo no lo encuentro :(

gracias un montón

PS un violín:... http://jsfiddle.net/rudiedirkx/ZWMRd/1/

Answer 1

ya he encontrado una manera Tal vez no es mejor que la envoltura alcance, pero creo que es más limpio:

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 
    } 
} 

ahora hay una (aparentemente más rápido) forma mucho más fácil (sincronización!) para obtener la URL de un archivo de datos:

img.src = URL.createObjectURL(file); 

de demostración http://jsfiddle.net/rudiedirkx/ZWMRd/8/show/ de ambos métodos, y el problema original ilustrado (arrastrar varias imágenes y comprobar la información sobre herramientas de título).

Answer 2

No creo que este archivo todavía sea compatible. Cuando trato de ejecutar el código de respuesta, este archivo no está definido, mientras que si ejecuto el código de la pregunta obtengo los resultados esperados. Creo que tienes que usar el cierre (al menos así es como lo hacen en html5rocks (Example)).