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

Question

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

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 из функции onload FileReader? И this, и 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

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