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对象，而不是File。 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
    }
}

现在有一种更容易（显然更快）的方式（同步！）来获取文件的数据网址：

img.src = URL.createObjectURL(file);

演示两种方法的http://jsfiddle.net/rudiedirkx/ZWMRd/8/show/，并说明原始问题（拖动多个图像并检查标题工具提示）。

Answer 2

我不认为this.file仍然受支持。当我尝试运行答案代码时，this.file是未定义的，而如果我运行问题中的代码，我会得到预期的结果。我认为你必须使用闭包（至少这是他们在html5rocks（Example）上的表现。）

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

2 个答案: