Избавится от ID в поле input

[laimas]

Свой старый использовать?

Зачем? Вы же добавляете тоже самое, а следовательно нужно взять уже существующее, клонировать, вставить, очистить поле, и удалить текст об имени и размере. Надобности хранить описание добавляемого в атрибуте кнопки нет. Если какие-то классы при добавлении нового не нужны, их нужно тоже удалить, а какие я не в курсе, ибо мне не понятно какие там "новые", а какие "старые".

Когда выбрали файл, он меняет статус лейбла и пишет, что файл выбран

Я же написал, что это работать не будет, if ($(this).val() != '') ... в событии onchange это бред, не будет такого события вообще! Вместо этого бесполезного лучше проверять тип файла выбранного для загрузки.

[laimas]

Выберите файл, посмотрите как изменится кнопка,

Не вижу изменений.

[RGBPlus]

Обновите еще раз, поставил старый код:

$(document).ready(function () {
	// Форма обратной связи | Статус файла
	$('body').on('change', 'input[name="files[]"]', function(){
		if ($(this).val() != '') {
			$(this).prev().addClass('disabled');
			$(this).prev().find('.status').html('Файл выбран');
		}
	});
    // Форма обратной связи | Добавить еще один файл
	$('.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').html('Файл выбран');
            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);
    });
});

[RGBPlus]

С этим кодом кнопка не работает:

$(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);
    });
});

Я понял ваш посыл, схожу еще раз перечитаю, а то немного запутался

[рони]

RGBPlus,
пост №10 посмотрите ... там id переделано на классы

[laimas]

Если вы хотите запретить выбор файла полем уже с выбором, то к чему такие глупости, просто так:

$('#files-group').on('change', 'input', function(){
        var f = $(this), file, fileSize;
        
        f.prev().addClass('disabled');
         
        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);
    });

Я ошибся, не равное пусто проверка, но она также глупа! Если файл выбран, то есть изменилось значение поля, то только в этом случае наступит событие onchange! К чему эта проверка которая ничего не дает? Пощелкайте вы диалог выбора файла с выбором и без выбора, что получите?

Запрещать же вновь сделать выбор полем думаю плохо и вряд ли вы этого хотите, а значит выбрано или не выбрано проверяют при отправке формы, но у вас не видно, чтобы это поле было обязательным для выбора.

Чего надо то?

[RGBPlus]

Ребята спасибо большое!

Рони предложил простой и отвечающий всем требованиям вариант!

$(function() {
		function d(a) {
			return a.on("change", 'input[name="files[]"]', function() {
				a.addClass("disabled");
				$(".status", a).text("Файл выбран");
				var c = this.files[0],
					b = 1048576 < c.size ? Math.round(100 * c.size / 1048576) / 100 + "MB" : Math.round(100 * c.size / 1024) / 100 + "KB";
				$(".my-file-name", a).text("Имя: " + c.name);
				$(".my-file-size", a).text("Размер: " + b)
			})
		}
		var b = $(".col-md-6.form-group");
		b = d(b).clone();
		$(".button-file").on("click", function() {
				$(".col-md-6.form-group:last").after(d(b.clone()))
			})
	});

Требовалось:
При после выбора файла указать его имя + размер + изменить статус на кнопке, что файл выбран, далее я уже на CSS подправил что требуется!

Запрещать пользователю ни кто не чего не будет, просто показать, что файл выбран

Все проверки: размер загружаемого файла и разрешенного расширения файла, уже будет проверятся на стороне движка сайта!

Ребят: laimas и рони искренняя благодарность за помощь, еще раз спасибо )))

[laimas]

Требовалось:
При после выбора файла указать его имя + размер + изменить статус на кнопке

Ну так это же совсем иное, а то что написано было изначально так это сущий бред

Рони ничего нового не добавил, тоже самое. Вот только класс "disabled" в бутстрап, это "недоступен", отсюда и не понять чего вы хотите. Уберите его и выберите иной.

[RGBPlus]

Рони, всю портянку объединил в один скрипт + заставил работать как требовалось. В Бустрапе использую только сетку, остальное предпочитаю сам )))

Результат: https://svetliygrad.ru/res обновил, можно посмотреть!

Еще немного доделаю недочеты и буду запускать форму!

Еще раз, спасибо!

[laimas]

Рони, всю портянку объединил в один скрипт + заставил работать как требовалось.

У рони тоже самое, написано не так, где-то кажется короче потому как используются псевоселекторы (работать будет чуть медленнее), где-то наоборот лишнее, но суть также самое потому как по другому и не ... И также два обработчика.

В Бустрапе использую только сетку, остальное предпочитаю сам

Классы в бутсрапе определены, что вы там при этом используете не важно, класс то вы его берете и не переопределяете (и не надо), а класс disabled в бустрапе, это икона типа дорожного знака "Запрещено", это я и буду видеть. И где логика?