forループ内の入力ファイル数をカウントする

Question

私は複数のファイル入力を使用していますが、forループを使用してFileReaderを使用してファイルを反復処理しています。 JSfiddleここ：https://jsfiddle.net/zLq8rsos/。それはファイル名enの内容を正しく示していますが、なぜカウントが機能しないのか分かりません。 1つのファイルを選択すると、「1」（なぜ0ではないのですか？）という番号が付けられます。 2つのファイルを選択すると、両方とも「2」とカウントされます。私は間違って何をしていますか？

function showDetails(file, content, n) { 
 
    var start = content.substring(0, 9); 
 
    var message = "File " + n + " is " + file.name + " and starts with " + start + " .<br>"; 
 
    $('#results').append(message); 
 
} 
 

 
$(document).ready(function() { 
 
    $('#files').on('change', function(evt) { 
 
    var files = evt.target.files; 
 
    if (files) { 
 
    \t $('#results').text(""); 
 
     for (var i = 0, f; f = files[i]; i++) { 
 
     var reader = new FileReader(); 
 
     reader.onload = (function(theFile) { 
 
      return function(e) { 
 
      var content = e.target.result; 
 
      showDetails(theFile, content, i); 
 
      }; 
 
     })(f); 
 
     reader.readAsText(f, "UTF-8"); 
 
     } 
 
    } else { 
 
     console.log("Failed to load file(s)"); 
 
    }; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" id="files" name="files[]" multiple> 
 
<div id="results"> 
 
</div>

Answer 1

利用閉鎖修正生命維持

function showDetails(file, content, n) { 
    var start = content.substring(0, 9); 
    var message = "File " + n + " is " + file.name + " and starts with " + start + " .<br>"; 
    $('#results').append(message); 
} 

$(document).ready(function() { 
    $('#files').on('change', function(evt) { 
    var files = evt.target.files; 
    if (files) { 
     $('#results').text(""); 
     for (var i = 0, f; f = files[i]; i++) { 
     var reader = new FileReader(); 
     reader.onload = (function(theFile,count) { 
      return function(e) { 
      var content = e.target.result; 
      showDetails(theFile, content, count); 
      }; 
     })(f,i+1); 
     reader.readAsText(f, "UTF-8"); 
     } 
    } else { 
     console.log("Failed to load file(s)"); 
    }; 
    }); 
}); 

Answer 2

問題文 - あなたはiの値にアクセスしようとしているとき、forループでは、それはもう1つのファイルのための1と2のための反復、したがって値を完了しました2ファイル。 https://jsfiddle.net/zLq8rsos/1/

Answer 3

JSFIDDLE

必要なのは、にある -

あなたのforループ

for (var i = 0, f; f = files[i]; i++) { 
     (function(i){ // Added 
      var reader = new FileReader(); 
      reader.onload = (function(theFile) { 
       return function(e) { 
        var content = e.target.result; 
        showDetails(theFile, content, i); 
       }; 
      })(f); 
      reader.readAsText(f, "UTF-8"); 
     })(i+1); 
} 

を参照するためには、更新することができますループを通るたびに

function showDetails(file, content, n) { 
 
    var start = content.substring(0, 9); 
 
    var message = "File " + n + " is " + file.name + " and starts with " + start + " .<br>"; 
 
    $('#results').append(message); 
 
} 
 

 
$(document).ready(function() { 
 
    $('#files').on('change', function(evt) { 
 
    var files = evt.target.files; 
 
    if (files) { 
 
    \t $('#results').text(""); 
 
     for (var i = 0, f; f = files[i]; i++) { 
 
     var reader = new FileReader(); 
 
     var x=1; 
 
     reader.onload = (function(theFile) { 
 
      return function(e) { 
 
      var content = e.target.result; 
 
      showDetails(theFile, content, x); 
 
      x++; 
 
      }; 
 
     })(f); 
 
     reader.readAsText(f, "UTF-8"); 
 
     } 
 
    } else { 
 
     console.log("Failed to load file(s)"); 
 
    }; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" id="files" name="files[]" multiple> 
 
<div id="results"> 
 
</div>

Answer 4

使用jqueryのそれぞれの数を更新、ファイルのインデックスは0

function showDetails(file, content, n) { 
 
    var start = content.substring(0, 9); 
 
    var message = "File " + n + " is " + file.name + " and starts with " + start + " .<br>"; 
 
    $('#results').append(message); 
 
} 
 

 
$(document).ready(function() { 
 
    $('#files').on('change', function(evt) { 
 
    var files = evt.target.files; 
 
    if (files) { 
 
    \t $('#results').text(""); 
 
     $.each(files, function(i, f){ 
 
     var reader = new FileReader(); 
 
     reader.onload = (function(theFile) { 
 
      return function(e) { 
 
      var content = e.target.result; 
 
      showDetails(theFile, content, i); 
 
      }; 
 
     })(f); 
 
     reader.readAsText(f, "UTF-8"); 
 
     }); 
 
    } else { 
 
     console.log("Failed to load file(s)"); 
 
    }; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" id="files" name="files[]" multiple> 
 
<div id="results"> 
 
</div>