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

С новым файловым 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 в функции и выполнить его для создания новой области и сохранить файл в этой области следующим образом:

  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? Оба this и e.target - это объект FileReader, а не файл. Есть ли что-то в this или e, которое является файлом? Я не могу найти его: (

Спасибо, куча.

PS. Скрипка: http://jsfiddle.net/rudiedirkx/ZWMRd/1/

Ответ 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/ обоих методов и проиллюстрирована исходная проблема (перетащите несколько изображений и проверьте всплывающие подсказки).

Ответ 2

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