Как исправить скрипт мультизагрузки?

[LingVist]

Доброго дня всем
Помогите исправить скрипт мультизагрузки файлов. Есть такой код

HTML

<output id="list"></output>

<div class="input-group cust-file-button">
    <div class="custom-file">
        <input type="file" class="img" id="files" name="file[]" accept="image/*" multiple>
    </div>
</div>

function handleFileSelect(evt) {
    let files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (let i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

       let reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {
                // Render thumbnail.
                let span = document.createElement('span');
                span.innerHTML = ['<img class="thumb" src="', e.target.result,
                    '" title="', theFile.name, '"/><span class="delete_img">Удалить</span>'].join('');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

Если выбрать один файл или сразу несколько, то все работает хорошо. Но если сначала выбрать один файл, потом добавить другой, потом третий, то в обработчике формы сохраняется только последний. Вопрос в том, как сделать так, чтобы можно было добавлять файлы по одному и они все передавались бы в обработчик.

Спасибо

[laimas]

если сначала выбрать один файл, потом добавить другой, потом третий

Для того и multiple, чтобы выбрать множество, а одним полем сначала один, потом другой, ... в итоге и будет загружен который выбирался последним.

[Malleys]

Вопрос в том, как сделать так, чтобы можно было добавлять файлы по одному и они все передавались бы в обработчик.

Заведите переменную, в которой будет находится массив списков файлов.

[LingVist]

Для того и multiple, чтобы выбрать множество, а одним полем сначала один, потом другой, ... в итоге и будет загружен который выбирался последним.

Может быть такое, что у пользователя не всегда есть возможность выбрать сразу несколько файлов. Поэтому я и хочу сделать так, чтобы он мог добавлять по очереди. Вот только как это сделать технически, не знаю.

[Malleys]

<input type="file" multiple>
<script>

const fileListArray = [];

document.querySelector("input[type=file]").addEventListener("change", event => {
	fileListArray.push(event.target.files);

	/* что-то делай с всеми файлами */
	console.log(fileListArray);
});

</script>

или так...

<input type="file" multiple>
<output></output>
<script>

const files = [];

document.querySelector("input[type=file]").addEventListener("change", event => {
	files.push(...event.target.files);

	/* что-то делай с всеми файлами, например, выведи имена файлов */
	document.querySelector("output").innerHTML =
		files.map(file => `<p>${file.name}</p>`).join("")
});

</script>

[LingVist]

Спасибо. Второй вариант как раз подойдет