Показать сообщение отдельно
  #6 (permalink)  
Старый 25.09.2017, 14:55
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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()) .... 'Файл выбран' не понятно, но такое проверяется не здесь.

Последний раз редактировалось laimas, 25.09.2017 в 15:06.
Ответить с цитированием