Не работает код в FileReader().onload

Question

Пытаюсь вставить выбранные пользователем файлы (фотографии) в слайдер через FileReader(). Вот слайдер и сам код.

<form id="create_post_form" method="post" enctype="multipart/form-data">
    <div class="slider">
        <div class="slider__wrapper">
            <div class="slider__items">
                <div class="slider__item" id="slider__plug">
                </div>
            </div>
        </div>
        <a class="slider__control slider__control_prev" style="border-radius: 0 10px 10px 0;" href="#" role="button" data-slide="prev"></a>
        <a class="slider__control slider__control_next" style="border-radius: 10px 0 0 10px;" href="#" role="button" data-slide="next"></a>
    </div>
    <div class="input_content">
        <textarea class="post_text"></textarea>
    </div>
    <div>
        <label class="attach_photo">
            <input id="photo_attachment" type="file" accept="image/*" multiple />
            <a>PHOTO</a>
        </label>
        <label class="attach_anyfile">
            <input id="file_attachment" type="file" multiple />
            <a>FILE</a>
        </label>
    </div>
</form>

function view_input_files() {
    var input_files = document.querySelector('#photo_attachment');
    if (input_files.files) {
        var files_amount = input_files.files.length;
        for (i = 0; i < files_amount; ++i) {
            $('.slider__items').append(`<div class="slider__item" id="slide_${i}"></div>`);
            var reader = new FileReader();
            reader.onload = function (event) {
                $($.parseHTML('<img>')).attr('src', event.target.result).appendTo($(`#slide_${i}`));
            }
            reader.readAsDataURL(input_files.files[i]);
            $("#slider__plug").remove();
        }
    }
}

Но часть кода, что в функции reader.onload просто не работает. Я пытался делать это по разному. Вывод:

<div class="slider">
    <div class="slider__wrapper">
        <div class="slider__items">         
            <div class="slider__item" id="slide_0"></div>
            <div class="slider__item" id="slide_1"></div>
        </div>
    </div>
    <a class="slider__control slider__control_prev" style="border-radius: 0 10px 10px 0;" href="#" role="button" data-slide="prev"></a>
    <a class="slider__control slider__control_next slider__control_show" style="border-radius: 10px 0 0 10px;" href="#" role="button" data-slide="next"></a>
    <ol class="slider__indicators"><li class="slider__indicator slider__indicator_active" data-slide-to="0"></li></ol>
</div>

Попробовал узнать значение i в onload и вне если загружать 2 файла:

for (i = 0; i < files_amount; ++i) {
            console.log(i); // 0, 1
            var reader = new FileReader();
            reader.onload = function (event) {
                console.log(i); // 1, 1
            }
            reader.readAsDataURL(input_files.files[i]);
}

Кто может объяснить как работает FileReader().onload. Заранее спасибо

Answer 1

Кое-как нашел решение. Вместо:

for (i = 0; i < files_amount; ++i) {
    var reader = new FileReader();
    reader.onload = function (event) {
        $($.parseHTML('<img>')).attr('src', event.target.result).appendTo($(`#slide_${i}`));
    }
    reader.readAsDataURL(input_files.files[i]);

Нужно использовать:

for (i = 0; i < files_amount; i++) {
    var reader = new FileReader();
    reader.onload = (function (current_image) {
        return function (event) {
            current_image.attr('src', event.target.result);
        }
    })($(`#slide_${i} img`));
    reader.readAsDataURL(input_files.files[i]);

Иначе самой функции не вернутся значения полученные в FileReader().onload

БЛОГ НА HUSL

Не работает код в FileReader().onload

Ответы (1 шт):