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

Posted 2023-02-15

【中文标题】HTML5 File API：在 FileReader 回调中获取 File 对象

【英文标题】：HTML5 File API: get File object within FileReader callback

【发布时间】：2011-05-23 04:57:29

【问题描述】：

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

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

【参考方案2】：

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

【讨论】：

这是我现在使用的（并且已经使用了一段时间）：js1.hotblocks.nl - javascript：js1.hotblocks.nl/tests/ajax/fdd.js - 仍然在我的答案中使用代码。它有效。没有（丑陋的）关闭。 （评论用//。）

如果您喜欢 Javascript，欢迎您使用（任何部分）它。我很好奇网络工作者如何在其中发挥作用（使用网络工作者进行图像加载回调以在上传之前读取和显示它们）

我错过了filereader.file = file; 的任务。感谢您指出此解决方案