Как просмотреть изображения с большим количеством входов?

Question

Как я могу просмотреть несколько изображений, загруженных с разных входов?

мой дизайн:

$(".img").change(function() {
    if (this.files && this.files[0]) {
        var img = this;
        var reader = new FileReader();
        reader.onload = function(e) {
            $(img).closest('div.image_container').find('.imageLive').attr('src', e.target.result);
        };
        reader.readAsDataURL(this.files[0]);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image_container">
    <div class="col-xs-2 one_card_center">
        <input type="file" name="image" class="img" id="img"/>
        <label for="img" class="img_color">اضف الصورة</label>
    </div>
    <div class="col-xs-6">
        <img src="{{ asset('cp/assets/images/placeholder.webp') }}" class="imageLive" id="imageLive">
    </div>
</div>
<div class="image_container">
    <div class="col-xs-2 one_card_center">
        <input type="file" name="image" class="img" id="img"/>
        <label for="img" class="img_color">اضف الصورة</label>
    </div>
    <div class="col-xs-6">
        <img src="{{ asset('cp/assets/images/placeholder.webp') }}" class="imageLive" id="imageLive">
    </div>
</div>

(я делал, когда добавлял новый ввод, все хорошо с этим, но нужно с предварительным просмотром изображения)

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

Answer 1

Вы прикрепляете изображение к каждому соответствующему элементу imageLive:

$('.imageLive').attr('src', e.target.result);

Предположительно, вам нужен только ближайший imageLive элемент. Оберните вашу общую структуру в некоторый контейнер:

<div class="image_container">
    <div class="col-xs-2 one_card_center">
        <input type="file" name="image" class="img" id="img" style="display:none;"/>
        <label for="img" class="img_color">add image</label>
    </div>
    <div class="col-xs-6">
        <img src="{{ asset('cp/assets/images/placeholder.webp') }}" class="imageLive" id="imageLive">
    </div>
</div>

Затем из текущего элемента .img вы можете перейти к этому контейнеру и вернуться к целевому элементу:

$(this).closest('div.image_container').find('.imageLive').attr('src', e.target.result);

Редактировать: Похоже, вам также нужно захватить ссылку на this, потому что этот контекст изменяется в обратном вызове от FileReader. Вы можете записать его в переменную для использования в обратном вызове. Например:

$(".img").change(function() {
    if (this.files && this.files[0]) {
        var img = this;
        var reader = new FileReader();
        reader.onload = function(e) {
            $(img).closest('div.image_container').find('.imageLive').attr('src', e.target.result);
        };
        reader.readAsDataURL(this.files[0]);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image_container">
    <div class="col-xs-2 one_card_center">
        <input type="file" name="image" class="img"/>
        <label for="img" class="img_color">اضف الصورة</label>
    </div>
    <div class="col-xs-6">
        <img src="" class="imageLive">
    </div>
</div>
<div class="image_container">
    <div class="col-xs-2 one_card_center">
        <input type="file" name="image" class="img"/>
        <label for="img" class="img_color">اضف الصورة</label>
    </div>
    <div class="col-xs-6">
        <img src="" class="imageLive">
    </div>
</div>