FileReaderの出力を配列に保存しました

Question

ファイル入力のリストを繰り返し処理して結果を1つの配列に保存することができれば幸いです。ここに私のコードのビットです。それは場合に役立ちます はまた、私は、私はこのコードを実行すると、結果として、私は '未定義' を取得

results = []; // array for storing results 
/*file inputs*/ 
inputs = [document.getElementById('file1'), document.getElementById('file2')]; 

function readFile() { 
    for (var i = 0; i < inputs.length(); i++) { 
     if (inputs[i].files && inputs[i].files[0]) { 
      var FR = new FileReader(); 
      FR.onload = function (event) { 
       results[i] = event.target.result; //array where I would like to store results 
      }; 
      FR.readAsDataURL(inputs[0].files[0]); 
     } 
    } 
} 
//here I would like to write down all results 
var btn = document.getElementById('saveBtn'); 
btn.onclick = function() { 
readFile(); 
for(var i=0; i < inputs.length(); i++) { 
    console.log(results[i]); 
} 
} 

JAVASCRIPT ...

HTML

 <input type="file" id="file1"> 
     <input type="file" id="file2"> 
     <button id="saveBtn">Save</button> 

をAngularJSを使用しています。 これを達成する方法はありますか？ありがとう

Answer 1

;：

はこれを試してみてください読み込みが完了する前に情報を表示しようとしているという事実は、あなたのコードにはいくつかの問題があります。

input.lengths() 

それは方法はありません

input.lengths 

長さでなければなりません。そのため、（Chromeの）コードをテストするとエラーが発生します。

また、同じデータを何度も読んでいます。

FR.readAsDataURL(inputs[0].files[0]); 

はおそらくそう

FR.readAsDataURL(inputs[i].files[0]); 

する必要があり、ここではその上に別テイクです。ロードしたアイテムを追跡するためにいくつかの変数を追加し、読み込んだアイテムの数を入力してから、ロードされたデータを表示するように関数を呼び出しました。

results = []; // array for storing results 
/*file inputs*/ 
inputs = [document.getElementById('file1'), document.getElementById('file2')]; 

//here I would like to write down all results 
var btn = document.getElementById('saveBtn'); 
var inputCount; 
var filesLoaded = 0; 

function readFile() { 
    inputCount = Number(inputs.length); 
    for (var i = 0; i < inputCount ; i++) { 
     if (inputs[i].files && inputs[i].files[0]) { 
      var FR = new FileReader(); 
      FR.onload = function (event) { 
       results.push(event.target.result); //array where I would like to store results 
       filesLoaded++; 
       if (filesLoaded == inputCount) { 
        showResult(); 
       } 
      }; 
      FR.readAsDataURL(inputs[i].files[0]); 
     } 
    } 
} 

btn.onclick = function() { 
    readFile(); 
} 

function showResult() { 
    for (var i = 0; i < inputs.length ; i++) { 
     console.log(results[i]); 
    } 
} 

あり、このようなファイルは、などを選択されていることを確認するように考えるべきいくつかのより多くの事が、ありますが、私はそれが一種のここでの適用範囲外だと思います。

Answer 2

FileReaderがロードされたときにonLoadが実行されるため、ログステートメントを書き込んだ後に実行されます。 Niek Vandaelは彼の答えになりますポイントのほかに https://jsfiddle.net/s17Lmc21/1/

results = []; // array for storing results 
/*file inputs*/ 
inputs = [document.getElementById('file1'),  document.getElementById('file2')]; 

function readFile() { 
    for (var i = 0; i < inputs.length; i++) { 
     if (inputs[i].files && inputs[i].files[0]) { 
      var FR = new FileReader(); 
      FR.onload = function (event) { 
       results[i] = event.target.result; //array where I would like  to store results 
       console.log(results[i]); 
      }; 
      FR.readAsDataURL(inputs[0].files[0]); 
     } 
    } 
} 
//here I would like to write down all results 
var btn = document.getElementById('saveBtn'); 
btn.onclick = function() { 
readFile(); 
}