web-dev-qa-db-ja.com

FileReader onloadイベントにパラメーターを渡す

ユーザーから与えられたいくつかの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);

可能だ？これどうやってするの？よろしくお願いいたします。

javascripthtmlfilereader
20
BeNdErR

以下を試してください：

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変数を作成しています。次に、（クロージャーのために）その変数にアクセスできる関数を作成し、それを返します。

48
Graham