Файл: upload/core/templates/default/pages/work/new.html
Строк: 143
<?php
<div class="home_us tematic profile">
{{ breadcrumbs_html|raw }}
<script type="application/ld+json">{{ breadcrumbs_json|raw }}</script>
<div class="head_box">
<div class="box_title">Новое объявление</div>
</div>
<div class="form_block">
<form method="POST" enctype="multipart/form-data" id="new_forms">
<input type="hidden" name="csrf_token" value="{{ csrf }}">
<select name="person">
<option value="1">Объявление от исполнителя</option>
<option value="2">Объявление от заказчика</option>
</select>
<input placeholder="Название" type="text" name="name" required>
<div class="rubric_set-work">
<select id="category" name="category" required>
<option value="">Выберите рубрику</option>
{% for c in categories %}
<option value="{{ c.id }}">{{ c.name }}</option>
{% endfor %}
</select>
<div id="section"></div>
</div>
<textarea placeholder="Подробно опишите задачу, сроки выполнения, другие условия работы"
name="desc" required></textarea>
<input placeholder="Цена" type="number" name="cena" required>
<input type="file" id="images" name="images[]" accept="image/*" multiple style="display:none">
<div id="previewBox" class="preview-box">
<div class="add-images-block" id="addImagesBtn">Добавить изображения</div>
</div>
<input type="submit" name="set" value="Разместить">
</form>
</div>
</div>
<script>
// === МНОЖЕСТВЕННЫЙ ПРЕДПРОСМОТР + ЛИМИТ 17 + КНОПКА ВСЕГДА ВНИЗУ ===
const fileInput = document.getElementById("images");
const previewBox = document.getElementById("previewBox");
const addBtn = document.getElementById("addImagesBtn");
let filesArray = [];
function moveAddButtonToEnd() {
previewBox.appendChild(addBtn);
}
function updateAddButtonState() {
if (filesArray.length >= 17) {
addBtn.style.display = "none";
fileInput.disabled = true;
} else {
addBtn.style.display = "flex";
fileInput.disabled = false;
}
moveAddButtonToEnd();
}
updateAddButtonState();
addBtn.onclick = () => fileInput.click();
fileInput.addEventListener("change", function(e) {
const newFiles = Array.from(e.target.files);
if (filesArray.length + newFiles.length > 17) {
alert("Можно загрузить максимум 17 изображений");
fileInput.value = "";
return;
}
const startIndex = filesArray.length;
filesArray = filesArray.concat(newFiles);
newFiles.forEach((file, i) => {
addPreviewItem(file, startIndex + i);
});
updateInputFiles();
updateAddButtonState();
});
function addPreviewItem(file, index) {
const reader = new FileReader();
reader.onload = function(event) {
const item = document.createElement("div");
item.classList.add("preview-item");
item.dataset.index = index;
item.innerHTML = `
<img src="${event.target.result}" class="preview-img">
<span class="remove-img">×</span>
`;
previewBox.insertBefore(item, addBtn);
item.querySelector(".remove-img").onclick = () => {
removeImage(index, item);
};
};
reader.readAsDataURL(file);
}
function removeImage(index, domElement) {
domElement.remove();
filesArray.splice(index, 1);
updateInputFiles();
updateAddButtonState();
const items = previewBox.querySelectorAll(".preview-item");
items.forEach((item, newIndex) => {
item.dataset.index = newIndex;
item.querySelector(".remove-img").onclick = () => {
removeImage(newIndex, item);
};
});
}
function updateInputFiles() {
const dt = new DataTransfer();
filesArray.forEach(file => dt.items.add(file));
fileInput.files = dt.files;
}
</script>
?>