Избавится от ID в поле input
Добрый день!
Есть такая форма: https://jsfiddle.net/m6vxq34u/20/ Когда прикрепляешь файл, то JS выводит имя файла + его размер. С первым файлом все ок, отрабатывает как нужно, но у второго ID тот же что и у первого и по этому не отрабатывает. Как переписать, что бы не привязываться к ID input!? Спасибо! |
Что-то не видно нескольких полей. Можно и по имени, только нужно экранировать:
$('body').on('change', 'input[name="files\\[\\]"]', ....
|
Нажмите "Добавить еще файл" появится еще одно поле!
Обновил ссылку: https://jsfiddle.net/m6vxq34u/20/ |
Цитата:
Ну в общем по имени можно как написано, можно и по классу, если добавить его, обработка делегируется. ID удалить. |
Если бы я был на столько силен в знаниях JS как вы!
Поможете в решение задачи? Можно прям там и ссылку сюда, или тут показать, как поправить. Спасибо! |
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()) .... 'Файл выбран' не понятно, но такое проверяется не здесь. |
Вот это круто ))) То, что доктор прописал!
|
Цитата:
То есть события onchange не возникнет и проверка if (!f.val()) в обработчике этого события мягко говоря бред. |
Скажите, я могу вместо этого куска
// Добавить еще один файл
$('.button-file').on('click', function() {
$(this).closest('.row').children().first().clone().insertBefore($(this).parent()).find('input').val('').end().find('[class|=my]').text('');
});
Свой старый использовать? Я понимаю, что это более красивое решение, но он копирует все + новые классы. т.е. у меня есть украшательство: Когда выбрали файл, он меняет статус лейбла и пишет, что файл выбран
// Форма обратной связи | Статус файла
$('body').on('change', 'input[name="files[]"]', function(){
if ($(this).val() != '') {
$(this).prev().addClass('disabled');
$(this).prev().find('.status').html('Файл выбран');
}
});
Проще, вот временная ссылка на работу: https://svetliygrad.ru/res Выберите файл, посмотрите как изменится кнопка, потом добавьте еще поле, что бы прикрепить файл |
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>
|
| Часовой пояс GMT +3, время: 23:50. |