Есть динамически генерируемая таблица, в одном из столбцов которой ставятся кастомные поля для загрузки файлов 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), верно? В таком случае как к ним обращаться?