从input type =“file”标记中获取文件时，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

您在SUM({@ABSamount})/2 的后续添加中遇到的问题源于作业中的索引值：

fileArray

因为fileArray[fileCounter] = files[fileCounter]; 基本上是fileCounter的长度，所以在第一个循环之后，任何后续添加都会导致fileArray以大于0的值开始。因此，当您尝试分配{时{1}} fileCounter，您选择的索引大于0，单个文件数组意味着您引用了未定义的元素。

那就是说，你真的不需要那些计数器，只需要数组：

＆＃13;

＆＃13;

files[fileCounter]

＆＃13;

fileArray

＆＃13;

＆＃13;

＆＃13;

您甚至可以使用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" />：

进一步简化此操作

＆＃13;

＆＃13;

concat

＆＃13;

slice

＆＃13;

＆＃13;

＆＃13;