ID my-file-name заменены на классы (в стилях также изменить). Обработка делегируется ближайшему родителю div class="row", которому добавлен ID files-group. В этом случае, коли полей в форме иных нет, достаточно имя тега в качестве селектора.
<div class="application-project">
<div class="container">
<div class="row" id="files-group">
<div class="col-md-6 form-group">
<div class="file-upload">
<label>
<div class="form-file-box">
<span class="status">Выберите файл</span>
</div>
<input type="file" name="files[]" value="" />
</label>
<div class="my-file-name"></div>
<div class="my-file-size"></div>
</div>
</div>
<div class="col-lg-12 form-group">
<div class="button-file"><span><i class="fa fa-plus" aria-hidden="true"></i> Добавить еще файл</span>
</div>
</div>
</div>
</div>
</body>
$(document).ready(function () {
// Добавить еще один файл
$('.button-file').on('click', function() {
$(this).closest('.row')
.children()
.first()
.clone()
.insertBefore($(this).parent())
.find('input')
.val('')
.end()
.find('[class|=my]')
.text('');
});
// Загрузка файла
$('#files-group').on('change', 'input', function(){
var f = $(this), file, fileSize;
if (!f.val()) {
f.prev().addClass('disabled');
f.prev().find('.status').text('Файл выбран');
return;
}
file = this.files[0];
fileSize = file.size > 1024 * 1024 ? Math.round(file.size * 100 / (1024 * 1024)) / 100 + 'MB'
: Math.round(file.size * 100 / 1024) / 100 + 'KB';
f.closest('.file-upload')
.find('[class|=my]')
.first()
.text('Имя: ' + file.name)
.end()
.last()
.text('Размер: ' + fileSize);
});
});
Если это форма и есть другие поля ее, то добавьте полю file класс, который использовать как селектор, здесь:
$('#files-group').on('change', '.имя_класса_поля_выбора_файла', function(){
Примечание: чего этим хочется добиться if (!f.val()) .... 'Файл выбран' не понятно, но такое проверяется не здесь.