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

使用JavaScript中的新File API，您可以读取Javascript中的文件以创建dataURL以向客户端显示客户端图片。我想知道是否可以在FileReader的onload回调中访问File对象。我将说明用一个例子：HTML5文件API：在FileReader中获取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/

来源

2010-12-09 Rudie

我已经找到了一种方法也许并不比范围包装好，但我认为这是整洁：

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/演示，以及说明的原始问题（拖动多个图像并检查标题工具提示）。

来源

2010-12-10 00:03:01 Rudie

-1

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

来源

2011-04-27 18:26:18

这就是我现在使用的（并且已经使用了一段时间）：http://js1.hotblocks.nl - javascript：http://js1.hotblocks.nl/tests/ajax/fdd.js - 仍然在我的答案中使用代码。它的工作原理。没有（丑陋）封闭。（它是用`//`注释的。） – Rudie 2011-04-27 20:11:24

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

回答

相关问题