Блог

В цикле foreach у меня есть несколько html-блоков, которые выглядят следующим образом:

 <label class="">Replace image/poster:</label>
<input type="file" name="replaced_main_image" class="form-control-file-border input-image-preview" />                   
                
<!-- preview replaced main image -->
<br />
<label class="">Preview replaced image/poster:</label><br />
<img class="image-preview" width="100" src="#" /> <!-- preview image -->
  

Для предварительного просмотра только что выбранного изображения для загрузки я использую этот код:

 // preview new selected image 
function readURL(input) {
  if (input.files amp;amp; input.files[0]) {
    var reader = new FileReader();    
    reader.onload = function(e) {
      $('.image-preview').attr('src', e.target.result);
    }    
    reader.readAsDataURL(input.files[0]); // convert to base64 string
  }
}
$(".input-image-preview").change(function() {
 readURL(this);

});
  

Это работает нормально, но в этом случае каждый img с class img-preview получает исходный код. И я хочу только следующий img с классом img-preview .

Насколько я знаю, я должен изменить строку в функции и должен выглядеть примерно так:

  reader.onload = function(e) {
      find next --> $('.image-preview').attr('src', e.target.result);
    }
  

Я не знаю, какой правильный синтаксис для этого….

Здесь:

 $(input).nextAll('.image-preview').eq( 0 ).attr('src', e.target.result);
  

используйте input в качестве источника, который вы передали в функцию, затем найдите все следующие .image-preview и ограничьте его первым с помощью .eq( 0 )