API-интерфейс HTML5: получить объект File в обратном вызове FileReader

Question

С новым API-интерфейсом файлов в Javascript вы можете читать файлы в Javascript для создания dataURL для отображения клиентских фотографий клиентов. Мне интересно, можете ли вы добраться до объекта File в обратном вызове FileReader onload. Я проиллюстрирую это на примере:

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

Что я мог сделать - то, что я делаю сейчас - это обернуть содержимое для цикла в функции и выполнить его, чтобы создать новую область и сохранить файл в таком объеме:

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

Мне просто интересно ... Может быть, я что-то упустил. Есть ли способ получить объект File из встроенной функции FileReader? Оба и e.target являются объектом FileReader, а не файлом. Есть ли что-то в this или e, что является файлом? Я не могу найти его :(

Благодаря кучу

PS скрипку:... http://jsfiddle.net/rudiedirkx/ZWMRd/1/

Answer 1

Я уже нашел способ Может быть не лучше, чем сфера обертки, но я думаю, что это аккуратнее:

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

Существует в настоящее время гораздо проще (по-видимому, быстрее) способ (синхронизация!), чтобы получить URL содержимое файла:

img.src = URL.createObjectURL(file); 

Демонстрация на методе http://jsfiddle.net/rudiedirkx/ZWMRd/8/show/ обоих методов и проиллюстрирована исходная проблема (перетащите несколько изображений и проверьте всплывающие подсказки по названию).

Answer 2

Я не думаю, что этот файл по-прежнему поддерживается. Когда я пытаюсь запустить код ответа, этот файл не определен, тогда как если я запустил код из вопроса, я получу ожидаемые результаты. Я думаю, вы должны использовать закрытие (по крайней мере, так они делают это на html5rocks (Example)).