1

Есть динамически генерируемая таблица, в одном из столбцов которой ставятся кастомные поля для загрузки файлов input type file такого вида:

<div class="file-upload">
<label class="label_cl">
<input id="uploaded-file1" type="file" name="file" class="upl_test" />
<span class = "span_cl" id = "upl_span">Выберите файл печати</span>
</label>
</div>

Этим скриптом я пытаюсь поменять текст span`а в выбранной ячейке (т.е. по событию onchange):

$("table").on("change", ".upl_but", function () {

try {               
        var file = $(".upl_test").prop('files')[0];
        if (file) {                     
            var fileSize = 0;                   

            if (file.size > 1024 * 1024) {
                fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
            }
            else {
                fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
            }
        }
    }catch(e) {
        var file = document.getElementById('uploaded-file1').value;
        file = file.replace(/\\/g, "/").split('/').pop();
        document.getElementById('file-name1').innerHTML = 'Имя: ' + file;
    }
    var filename = file.name + " (" + fileSize + ")";

    $(this).find("span").text(filename);

});

Текст меняется только у первого инпута в таблице, остальные никак не реагируют (как я понял нужно каждому полю уникальный id??...или нет), сами кнопки работают, файлы загружаются.Как быть?

UPD.

Если имя поля ввода файлов писать со скобками [], то в таком случае они будут добавляться как элементы массива (с разными id), верно? В таком случае как к ним обращаться?

3
  • какого массива? Речь о серверном коде?
    – user176262
    12 апр 2018 в 13:02
  • Я имею ввиду если написать <input type = "file", name = "name[]"> то в $_POST они будут передаваться как элементы массива с разными индексами. Это как то можно использовать?
    – Alex
    12 апр 2018 в 13:11
  • Использовать для чего? Это не имеет никакого отношения к тому, о чем Вы спрашиваете. Ответ на Ваш вопрос - ниже.
    – user176262
    12 апр 2018 в 13:14

1 ответ 1

0
$("table").on("change", ".upl_test", function () {
  var file = $(this).prop('files')[0];
  ...

  var $span = $(this).closest(".file-upload").find(".span_cl");
  $span.text(filename);
});

Совет дня:

Не создавайте на странице элементы с одинаковыми id.

2
  • "Не создавайте на странице элементы с одинаковыми id" В таком случае как генерировать для каждого input свой id и как потом к ним обращаться?
    – Alex
    12 апр 2018 в 5:30
  • @Alex, в зависимости от того, как Вы эти инпуты генерите, так же создавайте им уникальные ID. Это не просто "совет дня", как написал Igor, - это требование w3c. Ни один валидатор одинаковые ID не пропустит. 12 апр 2018 в 11:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.