RGBPlus,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">.application-project {
background: #ececec;
margin: 3rem auto;
display: block;
width: 800px;
padding: 3rem 2rem;
}
.application-project .h4 {
font: 600 16px/16px Helvetica,Arial,sans-serif;
color: #2C3E50;
margin: 2rem 0 1rem 0;
}
.application-project .h4.form-title {
color: #16A085;
padding: 0 0 1.3rem 0;
border-bottom: 1px solid #16A085;
}
.application-project label {
display: block;
font: 300 16px/16px pragmatica,Helvetica,Arial,sans-serif;
padding: 0;
margin: 0.8rem 0;
}
.application-project label span.sure,
.form-information span.sure {
color: #C0392B;
}
.application-project .select,
.application-project .select-tags {
width: 100%;
}
.application-project .select2-selection {
border: 1px solid #c3d3e4;
box-shadow: 0 1px 1px 1px #ececec inset;
border-radius: 4px;
font: 300 15px/15px pragmatica,Helvetica, Arial, sans-serif;
height: 35px;
padding: 0.4rem 0 0 0.3rem;
}
.application-project .select2-selection .select2-selection__arrow b {
border-color: #2C3E50 transparent transparent transparent;
margin-left: -9px;
margin-top: 1px;
}
.application-project input,
.application-project textarea {
font: 300 15px/15px pragmatica, Helvetica, Arial, sans-serif;
border: 1px solid #c3d3e4;
border-radius: 5px;
margin: 0;
box-shadow: 0 1px 1px 1px #ececec inset;
width: 100% !important;
}
.application-project input {
height: 33px;
padding: 0 1rem;
}
.application-project textarea {
padding: 1rem;
}
.application-project .button-file span {
color: #16A085;
font: 600 16px/16px Helvetica,Arial,sans-serif;
display: inline-block;
cursor: pointer;
padding: 0.2rem 0;
border-bottom: 1px dashed;
margin: 1rem 0;
}
.application-project .button-file span i {
font-weight: normal;
font-size: 15px;
color: #2C3E50;
}
.application-project .file-upload {
position: relative;
overflow: hidden;
width: 100%;
height: 65px;
}
.application-project .file-upload label {
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.application-project .file-upload label .form-file-box {
background: #16A085;
color: #fff;
cursor: pointer;
text-transform: uppercase;
padding: 0.7rem 0 0.5rem 0;
font: 300 14px/14px pragmatica,Helvetica,Arial,sans-serif;
width: 100%;
text-align: center;
}
.application-project .file-upload label .form-file-box:hover,
.application-project .file-upload label .form-file-box.disabled {
background: #1ABC9C;
}
.application-project .file-upload label .form-file-box.disabled {
cursor: not-allowed;
}
.application-project .file-upload input[type="file"] {
display: none;
}
.application-project .my-file-name {
margin: 2.2rem 0 0 0;
}
.application-project .my-file-name,
.application-project .my-file-size {
font: 300 11px/13px pragmatica, Helvetica, Arial, sans-serif;
padding: 0.2rem 0 0 0;
}
.form-group {
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(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()))
})
});
</script>
</head>
<body>
<div class="application-project">
<div class="container">
<div class="row">
<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>
</div>
</body>
</html>