如何预览具有多个输入的图像？

Question

How can i preview multiple images uploaded from different inputs?

my design:

 $(".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>

( I did when adding new input all things is good with this but need with image preview )

I need when user add new input and add image preview it does not matter how many inputs add

Answer 1

You're attaching the image to every matching imageLive element:

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

Presumably you only want the nearest imageLive element. Wrap your overall structure in a container of some sort:

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

Then from the current .img element you can traverse up to that container and back down to the target element:

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

Edit: It looks like you'll also need to capture the reference to this , because that context changes in the callback from the FileReader . You can capture it in a variable to use within the callback. For example:

 $(".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>