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

Доброго дня всем
Помогите исправить скрипт мультизагрузки файлов. Есть такой код
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>

JS
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);


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

Спасибо
  • Вопрос задан
  • 85 просмотров
Пригласить эксперта
Ответы на вопрос 1
@AUser0
Чем больше знаю, тем лучше понимаю, как мало знаю.
Логично, ведь данные о файлах передаются через <input type=file multiple>, а значит именно там хранится список файлов, выбранных при последнем действии. Выбрали один файл или несколько файлов - уже не суть важно, главное - хранится последнее действие.

Нужно переписывать код, сохраняя выбранные файлы в какой-нибудь переменной (в массиве). Но судя по <span class=delete_img>, какой-то такой функционал уже присутствует, удаляет файлы из <input>-а...

В общем стоит нанять специалиста.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы