Anzahl Eingabedateien in for Schleife

Question

Ich benutze eine Eingabe mehrere Dateien und dann eine for-Schleife, um die Dateien mit FileReader zu durchlaufen. JFehler hier: https://jsfiddle.net/zLq8rsos/. Es zeigt den Dateinamen und den Inhalt korrekt an, aber ich verstehe nicht, warum das Zählen nicht funktioniert. Wenn ich eine Datei wähle, ist sie mit 1 nummeriert (warum nicht 0?). Wenn ich zwei Dateien auswähle, werden beide als "2" gezählt. Was mache ich falsch?

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

Verwenden Verschlüsse ändern IIFE

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

Problemstellung - In for-Schleife, wenn Sie versuchen, den Wert von i zugreifen zu können, hat sie bereits abgeschlossen, die Iterationen und damit den Wert, weil 1 für 1 Datei und 2 für 2 Dateien.

Sie können Ihre for-Schleife

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); 
} 

Als Referenz aktualisieren - https://jsfiddle.net/zLq8rsos/1/

Answer 3

JSFIDDLE

Alles, was Sie brauchen, ist zu Aktualisieren der Zählung durch die Schleife jedes Mal

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

Verwendung jquery jeder, starten Sie den Index der Datei mit 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>