HTML5 File API：FileReaderコールバック内のFileオブジェクトを取得

Question

Javascriptで新しいFile APIを使用すると、クライアント側の画像clientsideを表示する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]; // 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 (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/

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

両方の方法のデモと、元の問題が示されています（複数の画像をドラッグして、タイトルのツールチップを確認してください）。

Answer 2

このファイルはまだサポートされているとは思わない。回答コードを実行しようとするとthis.fileは定義されていませんが、質問からコードを実行すると期待される結果が得られます。私はあなたがクロージャを使用しなければならないと思う（少なくともこれはhtml5rocks（Example）でこれを行う方法です）。