爲for循環計算輸入文件

Question

我正在使用多文件輸入，然後使用FileReader循環遍歷文件。 JSfiddle here：https://jsfiddle.net/zLq8rsos/。它正確顯示文件名en內容，但我不明白爲什麼計數不起作用。如果我選擇一個文件，它的編號爲'1'（爲什麼不是0？）。如果我選擇兩個文件，它們都被計爲'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

使用閉修改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

問題陳述 - 在for循環，當您試圖訪問的i的價值，它已經完成了迭代，從而因爲1 1檔和2的值2個文件。

您可以更新您的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); 
} 

僅供參考 - https://jsfiddle.net/zLq8rsos/1/

Answer 3

JSFIDDLE

所有你需要的是通過循環每次

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>