JavaScript FileReader：複数のテキストファイルの内容を後で使用できるように配列に保存

Question

純粋なJavaScriptのみを使用して複数のテキストファイルの内容を配列変数に保存しようとしています。私はStackoverflowでいくつかの同様の質問と回答を見つけ、これを試してみました。成功しませんでした。たぶん、この質問は簡単に答えることができますが、私は初心者です。寛容にしてください。ここで

は私のコードです：

<script> 
 
    fileContents=new Array(); 
 

 
    function getThem(){ 
 
     var allFiles=document.getElementById("fileInput").files; 
 

 
     for(var allFilesCounter=0;allFilesCounter<allFiles.length;allFilesCounter++){ 
 

 
     function readFile(file){ 
 
      var reader=new FileReader(); 
 

 
      reader.onload=function(){ 
 
       alert(reader.result); 
 
       fileContents[fileContents.length]=reader.result; 
 
      }; 
 
      reader.readAsText(file,"UTF-8"); 
 
     }; 
 
     }; 
 
    }; 
 
</script> 
 

 
<input type="file" accept="text/plain" id="fileInput" multiple="multiple" onChange="getThem();">

私はすでにファイルコンテンツのすべての処理がリーダ内で行われることを必要としているようだこれ、FileReaderのは「非同期」が動作することがわかりました.onload-function。 "alert"は他の処理と同様に動作しますが、コンテンツをグローバル変数に代入するのではなく、私の場合は "fileContents [fileContents.length]"です。

それは簡単なコードで達成できますか、変数に保存されたファイルの内容を取得することができないということを受け入れるべきですか（これは私にとっては最もシンプルでエレガントな方法ですが、違う）。

ご協力いただきありがとうございます。

Answer 1

あなたは正しいパスにいますが、readFile関数を作成して呼び出しを行っていないため、ファイルの内容を取得できませんでしたが、関数は不要です。ベローには、より簡単なコードで作業スニペットがあります。理解していただければ幸いです。

var fileContents = []; 
 

 
document.getElementById('fileInput').addEventListener('change', handleFileSelect); 
 

 
function handleFileSelect (e) { 
 
    var allFiles = e.target.files; 
 
    for (var i = 0; i < allFiles.length; i++) { 
 
     var reader = new FileReader(); 
 
     reader.onload = function(e) { 
 
      alert(e.target.result); 
 
      fileContents.push(e.target.result); 
 
     }; 
 
     reader.readAsText(allFiles[i]); 
 
    }; 
 
};

<input type="file" accept="text/plain" id="fileInput" multiple="multiple" />