17

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

var div = document.createElement('div');
div.ondrop = 函数（e）{
  e.preventDefault();
  e.stopPropagation();
  var 文件 = e.dataTransfer.files;
  for ( var i=0; i<files.length; i++ ) {
    var 文件 = 文件 [i]; // 这是我想要的文件！！
    var filereader = new FileReader();
    filereader.onload = 函数（e）{
      这个; // FileReader 对象
      e.目标；// 同一个 FileReader 对象
      这个.结果; // dataURL，类似于 data:image/jpeg;base64,.....
      var img = document.createElement('img');
      img.src = this.result;
      img.title = file.fileName; // 这将不起作用
      document.appendChild(img);
    }
  }
  返回假；
}

我能做的——我现在做的——是将 for 循环的内容包装在一个函数中并执行它以创建一个新的范围并将文件保存在该范围内，如下所示：

  for ( var i=0; i<files.length; i++ ) {
    var _file = 文件[i]; // 这是我想要的文件！！
    （函数（文件）{
      // 在这里做 FileReader 的东西
    }）（_文件）;
  }

我只是想知道......也许我错过了一些东西。有没有办法从 FileReader 的 onload 函数中获取 File 对象？this和都是e.targetFileReader 对象而不是 File。文件中有什么东西this吗e？我找不到它:(

谢谢一堆。

PS。小提琴：http: //jsfiddle.net/rudiedirkx/ZWMRd/1/

4

2 回答 2

27

我已经找到了办法。也许不比范围包装器好，但我认为它更整洁：

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/上演示了这两种方法，并说明了原始问题（拖动多个图像并检查标题工具提示）。

于 2010-12-10T00:03:01.753 回答
-1

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

于 2011-04-27T18:26:18.637 回答