从输入类型=“文件”标签中获取文件时，javascript数组中的未定义文件

Question

我在从输入标签中抓取图像时遇到了这个非常奇怪的问题，我不知道为什么。代码如下：

var files,
    fileCounter = 0,
    fileArray = [];

$("#fc").on("change", function() {
    files = $("#fc")[0].files;
    console.log(files);
    for (var i = 0; i < files.length; i++) {
        fileArray[fileCounter] = files[fileCounter];
        fileCounter++;
        console.log(fileArray);
    }
});

html 很简单：

<input type="file" id="fc" multiple="multiple" />

fileArray 应该在我添加时抓取每个图像，但在将文件列为“未定义”之前它只会抓取 2 个。不知道为什么。

Answer 1

您在后续添加 fileArray 时遇到的问题源于您在作业中的索引值：

fileArray[fileCounter] = files[fileCounter];

因为fileCounter 本质上是fileArray 的长度，所以在第一个循环之后任何后续添加都会导致fileCounter 从大于0 的值开始。因此，当您尝试将files[fileCounter] 分配给@987654327 @，您选择的索引大于 0，这对于单个文件数组意味着您正在引用未定义的元素。

也就是说，您实际上并不需要那些计数器，而只需要数组：

var fileArray = [];

$("#fc").on("change", function() {
  var files = $("#fc")[0].files;
  console.log(files);
  for (var i = 0, len = files.length; i < len; i++) {
    fileArray.push(files[i]);
    console.log(fileArray);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="fc" multiple="multiple" />

您甚至可以使用concat 和slice 进一步简化此过程：

var fileArray = [];

$("#fc").on("change", function() {
  var files = $("#fc")[0].files;
  console.log(files);
  // convert `files` to an array and concat it to `fileArray`
  fileArray = fileArray.concat(Array.prototype.slice.call(files));
  console.log(fileArray);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="fc" multiple="multiple" />