JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<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 id="files" type="file" name="files[]" value="" />
</label>
<div id="my-file-name"></div>
<div id="my-file-size"></div>
</div>
</div>
<div class="col-lg-12 form-group">
<div data-add='<div class="col-md-6 form-group"><div class="file-upload"><label><div class="form-file-box"><span class="status">Выберите файл</span></div><input id="files" name="files[]" value="" type="file" /></label><div id="my-file-name"></div><div id="my-file-size"></div></div></div>' class="button-file"><span><i class="fa fa-plus" aria-hidden="true"></i> Добавить еще файл</span>
</div>
</div>
</div>
</div>
</div>
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:...
JavaScript
$(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).parent().before($(this).data('add'));
});
// Форма обратной связи | Загрузка файла
$('input[name="files[]"]').on('change', function() {
try {
var file = document.getElementById('files').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';
}
document.getElementById('my-file-name').innerHTML = 'Имя: ' + file.name;
document.getElementById('my-file-size').innerHTML = 'Размер: ' + fileSize;
}
} catch (e) {
var file = document.getElementById('my-file').value;
file = file.replace(/\\/g, "/").split('/').pop();
document.getElementById('my-file-name').innerHTML = 'Имя: ' + file;
}
});
});