Используйте API данных для доступа к значению позиции загружаемого изображения

Question

Может быть, это еще один глупый вопрос, но он сводит меня с ума.В основном у меня есть эта форма для ввода 20 изображений (сгенерированных для)

<?php
    for ($i=0; $i<20; $i++)
        {

          echo '<div class="col-xl-4 col-lg-4 col-md-6">';
          echo '<div class="file-field">';
          echo '<div class="z-depth-1-half mb-4" id="thumb-output'.$i.'"></div>';
          echo '<div class="d-flex justify-content-center">';
          echo '<div class="custom-file">';
          echo '<input type="file" name="field'.$i.'" class="custom-file-input" id="inputGroupFile'.$i.'" aria-describedby="inputGroupFileAddon'.$i.'">';
          echo '<label class="custom-file-label" for="inputGroupFile'.$i.'">Choose file</label>';
          echo '</div>';
          echo '</div>';
          echo '</div>';
          echo '</div>';
          echo '';
          echo '<div class="col-xl-8 col-lg-8 col-md-6">';
          echo '</div>';

        }
 ?>

Мне нужно показать Thumbinail перед загрузкой, в данный момент он работает только для одного из полей (# inputGroupFile3и # thumb-output3).

$(document).ready(function(){
    $('#inputGroupFile3').on('change', function(){ //on file input change
        if (window.File && window.FileReader && window.FileList && window.Blob) //check File API supported browser
        {
            $('#thumb-output3').html(''); //clear html of output element
            var data = $(this)[0].files; //this file data

            $.each(data, function(index, file){ //loop though each file
                if(/(\.|\/)(gif|jpe?g|png)$/i.test(file.type)){ //check supported file type
                    var fRead = new FileReader(); //new filereader
                    fRead.onload = (function(file){ //trigger function on successful read
                    return function(e) {
                        var img = $('<img/>').addClass('thumb img-fluid img-thumbnail').attr('src', e.target.result); //create image element
                        $('#thumb-output3').append(img); //append image to output element
                    };
                    })(file);
                    fRead.readAsDataURL(file); //URL representing the file's data.
                }
            });

        }else{
            alert("Your browser doesn't support File API!"); //if File API is absent
        }
    });
});

По сути, мне нужно что-то вроде PHP-кода (id="thumb-output'.$i.'), но в JS что-то вроде:

 $(document).ready(function(){
   $('#inputGroupFile<b>$i</b>').on('change' [...]

[...]$('#thumb-output<b>$i</b>').append(img)[...]

Спасибо.

Answer 1

Вы можете использовать API .data(), чтобы получить идентификационный номер, для этого добавьте атрибут, скажем index в следующей строке

echo '<input type="file" data-index="'.$i.'" name="field'.$i.'" class="custom-file-input" id="inputGroupFile'.$i.'" aria-describedby="inputGroupFileAddon'.$i.'">';

, этот атрибут будет доступен в вашем jQueryобработчик событий, который вы должны изменить, чтобы он был универсальным, а не специфичным для идентификатора.

$('.custom-file-input').on('change', function(){ 
//on file input change, (#inputGroupFile3 changed to .custom-file-input as 
//it will listen to all images with that class).

var index = jQuery(this).data('index'); 
//this should now hold the index value of the current image like 1 or 2 or 3 so on,
///use the variable where ever you need the ID number.

//Rest of the handler body