HTML5文件API:在FileReader回调中获取File对象

Question

使用Javascript中的新File API,您可以在Javascript中读取文件以创建dataURL以显示客户端的客户端图片.我想知道你是否可以在FileReader的onload回调中访问File对象.我将用一个例子来说明这一点:

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

我只是想知道......也许我错过了什么.有没有办法从FileReader的onload函数中获取File对象？这两个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/,并说明原始问题(拖动多个图像并检查标题工具提示).