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

Question

使用 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

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

for ( var i=0; i

我只是想知道......也许我错过了一些东西。有没有办法从 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
    }
}

现在有一种更简单（显然更快）的方式（同步！）来获取文件的数据 URL：

img.src = URL.createObjectURL(file);

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

Answer 2

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