HTML5 File API：在FileReader回调中获取File对象 [英] HTML5 File API: get File object within FileReader callback

问题描述

使用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]; //这是我想要的文件!! 
 var filereader = new FileReader（）; 
 filereader.onload = function（e）{
 this; // FileReader对象
 e.target; //相同的FileReader对象
 this.result; // dataURL，类似data：image / jpeg; base64，..... 
 var img = document.createElement（'img'）; 
 img.src = this.result; 
 img.title = file.fileName; //这将不起作用
 document.appendChild（img）; 
} 
} 
返回false; 
} 
 

我可以做什么 - 我现在要做的 - 是将for循环的内容封装在一个函数中，执行它来创建一个新的作用域并在该作用域中保存一个文件，如下所示：

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

我只是想知道......也许我错过了一些东西。有没有办法从FileReader的onload函数中获取File对象？ 这个和 e.target 都是FileReader对象而不是File。在这个或 e 中是否有文件？我无法找到它：（$ / b>

非常感谢。

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

<我已经找到了一种方法，也许不比范围包装器更好，但我认为它很整洁：

 
 class =lang-js prettyprint-override>  for（var i = 0; i< files.length; i ++）{
 var file = files [i]; //这是我想要的文件!! 
 var filereader = new FileReader（）; 
 filereader.file = file; 
 filereader.onload = function（e）{
 var file = this.file ; // there is！
 // do stuff 
} 
} 
  

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

  img.src = URL.createObjectURL（file）; 
  

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

With the new File API in Javascript you can read files in Javascript to create dataURLs to show clientside pictures clientside. I'm wondering if you can reach the File object within the FileReader's onload callback. I will illustrate this with an example:

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;
}

What I could do - what I do right now - is wrap the contents of the for loop in a function and execute it to create a new scope and keep a file in that scope like so:

  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);
  }

I was just wondering... Maybe I'm missing something. Is there a way to get the File object from within the onload function of the FileReader? Both this and e.target are the FileReader object and not the File. Is there something in this or e that is the File?? I can't find it :(

Thanks a bunch.

PS. A fiddle: http://jsfiddle.net/rudiedirkx/ZWMRd/1/

解决方案

I already found a way. Maybe not better than the scope wrapper, but I think it's neater:

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
    }
}

There is now a much easier (apparently faster) way (sync!) to get a file's data URL:

img.src = URL.createObjectURL(file);

Demo on http://jsfiddle.net/rudiedirkx/ZWMRd/8/show/ of both methods, and the original problem illustrated (drag multiple images and check the title tooltips).

这篇关于HTML5 File API：在FileReader回调中获取File对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！