Неопределенный файл в массиве javascript при захвате файлов из типа ввода = тег "файл"

89
6

У меня есть эта странная проблема, захватывая изображения из тега ввода, и я не могу понять, почему. Здесь код:

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

ФайлArray должен захватывать каждое изображение, когда я его добавляю, но он будет захватывать только 2, прежде чем перечислять файлы как "undefined". Не знаю, почему.

спросил(а) 2021-01-19T17:28:37+03:00 6 месяцев, 1 неделя назад
1
Решение
78

Проблема, с которой вы сталкиваетесь при последующих добавлениях к fileArray связана с вашим значением индекса в присваивании:

fileArray[fileCounter] = files[fileCounter];

Поскольку fileCounter по существу является длиной fileArray, после первого цикла любые последующие добавления заставят fileCounter начинаться со значений, превышающих 0. Поэтому, когда вы пытались назначить files[fileCounter] fileArray, fileArray вами индекс был больше, чем 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" />

ответил(а) 2021-01-19T17:28:37+03:00 6 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема