Question

我使用多文件输入，然后使用for循环使用FileReader迭代文件。 JS在这里：https://jsfiddle.net/zLq8rsos/。它正确显示文件名和内容，但我不明白为什么计数不起作用。如果我选择一个文件，那么它的编号是“1＆＃39; （为什么不是0？）。如果我选择了两个文件，那么它们都会计入＆＃39; 2＆＃39;。我做错了什么？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

问题陈述 - 在尝试访问i的值时，在for循环中，它已经完成了迭代，因此值为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://community.clevertap.com/

Answer 2

使用闭包修改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 3

JSFIDDLE

您只需每次都通过循环更新计数

＆＃13;

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

＆＃13;

<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>

＆＃13;

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) {
    	$('#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>

在for循环中计算输入文件

4 个答案: