web-dev-qa-db-ja.com

filereaderがファイルを非同期にロードした後にファイル名を取得する

ディレクトリ内のいくつかのファイルを読み込んで、それらのデータを解析しています。これは今のところうまくいきますが、私が見ているファイルを知りたいです。そのため、ロード後にファイルの名前が必要です。誰でもそれを助けることができますか?

// dir内のすべてのファイルを取得します

function updateData(){
  var dirReader = approot.createReader();

  var fail =failCB('Error - Directory for parsing failed to open'); // logs fail...
  dirReader.readEntries(parseData,fail); 
}

//各ファイルをロード

function parseData(entries){
  var i;
  for (i=0; i<entries.length; i++) {
    var reader = new FileReader();
    reader.onloadend = createListItem;
    reader.readAsText(entries[i]);
  }
}

//ここで名前を知りたい!!!!

function createListItem(evt){
    // it gives me all the loaded data. But based on wich file it was, i would like to handle it!
  console.log(evt.target.result)
    // lets say something like this
    $('#content').find(   file.name   ).append(evt.target.result);
  }
}

ご意見をお待ちしております;)

29
Sidrich2009

Fileの周りにクロージャーを作成して、現在のファイルをキャプチャします。その後、ファイル名を取得できます。

例: http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files

ファイル情報をキャプチャするための閉鎖。

function parseData(entries){
  for (var i=0; i<entries.length; i++) {
    reader.onloadend = (function(file) {
      return function(evt) {
        createListItem(evt, file)
      };
    })(entries[i]);
    reader.readAsText(entries[i]);
  }
}

そして、呼び出された関数は追加の引数を取得します

function createListItem(evt, file) {
  console.log(evt.target.result)
  console.log(file.name);
}
38
ebidel

次のソースコードは、ファイルリーダーに属性を追加します

    for(i=0; i < files.length; i++)
    {
        var fileReader = new FileReader();
        fileReader.onload = function(file)
        {
              // DO what you need here
              // file name = file.target.fileName
        } // end of reader load
        fileReader.fileName = files[i].name;
        fileReader.readAsBinaryString(files[i]);
    }
13
Thibault T

この問題を解決する別の方法は、次のようにonload- eventでonloadend- eventの後にファイル名を読み取ることです。

for (var i = 0; i < files.length; i++) {

    var fileReader = new FileReader();

    fileReader.fileName = files[i].name;

    fileReader.onload = function () {
        /* do something with file */
    }

    fileReader.onloadend = function () {
        console.log(fileReader.fileName); // here you can access the original file name
    }

    fileReader.readAsText(files[i]);

}
1
C.Christensen