ユーザーが指定したいくつかの csv ファイルを読み取る必要があります。ファイルはドラッグ アンド ドロップ div を使用してページ/スクリプトに渡され、次のようにファイル ドロップが処理されます。
function handleFileDrop(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
...
}
各ファイルを配列に変換する csv ライブラリを使用して解析する必要がありますが、現在解析しているファイル名を追跡する必要もあります。各ファイルを解析するために使用するコードは次のとおりです。
for(var x = 0; x < files.length; x++){
var currFile = files[x];
var fileName = currFile.name;
var reader = new FileReader();
reader.onload = (function(theFile){
return function(e){
var csvArr = CSV.csvToArray( e.target.result, ";", true );
console.log(csvArr);
};
})(currFile);
reader.readAsText(currFile);
}
ここまでは、すべて正常に動作します。必要なのは、イベントにファイル名も渡すことですreader.onload。例:
reader.onload = (function(theFile){
return function(e){
***** I need to have fileName value HERE *****
};
})(currFile);
可能ですか？どうすればいいですか？ご協力をよろしくお願いします。
ベストアンサー1
次のことを試してください。
var reader = new FileReader();
reader.onload = (function(theFile){
var fileName = theFile.name;
return function(e){
console.log(fileName);
console.log(e.target.result);
};
})(currFile);
reader.readAsText(currFile);
ここでは、ファイルが外側のメソッドに渡されるたびに新しい変数を作成しますfileName。次に、その変数にアクセスし (クロージャにより) それを返す関数を作成します。