17

Javascriptの新しいFileAPIを使用すると、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）{
      これ; //FileReaderオブジェクト
      e。ターゲット; //同じ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ループの内容を関数でラップし、それを実行して新しいスコープを作成し、次のようにそのスコープにファイルを保持することです。

  for（var i = 0; i <files.length; i ++）{
    var _file = files [i]; //これは私が欲しいファイルです!!
    （関数（ファイル）{
      //ここでFileReaderの処理を行います
    }）（_ファイル）;
  }

私はただ疑問に思っていました...多分私は何かが欠けています。FileReaderのonload関数内からFileオブジェクトを取得する方法はありますか？thisとは両方ともe.targetFileReaderオブジェクトであり、Fileではありません。何かが入っているのですか、thisそれともeファイルですか？見つかりません:(

本当にありがとう。

PS。フィドル： http： //jsfiddle.net/rudiedirkx/ZWMRd/1/

4

2 に答える 2

27

私はすでに方法を見つけました。スコープラッパーよりも優れているとは言えませんが、より適切だと思います。

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/で両方の方法のデモを行い、元の問題を示します（複数の画像をドラッグして、タイトルのツールチップを確認します）。

于 2010-12-10T00:03:01.753 に答える
-1

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

于 2011-04-27T18:26:18.637 に答える