Есть форма, подскажите как организовать мультизагрузку при помощи fileupload , и чтобы фото отобразились в li + их можно было удалить по одному изображению и по клику на конку добавить, занести изображения в таблицу и на хостинг с остальными данными
$('#imageupload').fileupload();
.form_section.form_section_image {
padding: 50px 60px;
margin: 0 0 15px 0;
}
.form_section {
background-color: #fff;
padding: 0 60px 30px 60px;
}
.form_tag.form_tag_image, .form_tag.form_tag_region_area, .form_tag.form_tag_company_ad, .form_tag.form_tag_halva, .form_tag.form_tag_payment_packages, .form_tag.form_tag_delete_account, .form_tag.form_tag_settings_pass, .form_tag.form_tag_settings_photo, .form_tag.form_tag_bundles, .form_tag.form_tag_settings {
font-size: 1.5625em;
color: #000;
font-weight: 500;
line-height: 100%;
margin-bottom: 32px;
}
.form_tag {
display: inline-block;
color: #000;
font-size: .8125em;
line-height: 100%;
vertical-align: middle;
margin: 0 0 10px 0;
}
.ai_image__content {
position: relative;
}
.ai_image__list {
zoom: 1;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.ai_image__list:before, .ai_image__list:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.ai_image__item:first-child, .ai_image__upload:first-child {
border: 4px solid #009e5c;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ai_image__upload {
cursor: pointer;
}
.ai_image__upload {
-webkit-background-size: 30px;
-moz-background-size: 30px;
-o-background-size: 30px;
background-size: 30px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiI…AtMy45OTksLTRaIiBzdHlsZT0iZmlsbDojZmZmOyIvPjwvZz48L2c+PC9nPjwvZz48L3N2Zz4=);
background-repeat: no-repeat;
background-position: 50%;
}
.ai_image__item, .ai_image__upload {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
position: relative;
background-color: #e8e8ef;
display: inline-block;
height: 84px;
width: 123px;
margin: 0 15px 15px 0;
vertical-align: top;
}
.ai_image__list:after {
clear: both;
}
.ai_image__list:before, .ai_image__list:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.ai_image__file {
display: block;
overflow: hidden;
height: 0;
}
.form_info {
color: #7b7b7d;
font-size: .75em;
line-height: 120%;
}
.item {
display: grid;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
}
.item label {
color: #222;
font-size: 14px;
font-weight: 400;
margin-bottom: 5px;
}
.item input {
width: 100%;
border: 1px solid #dddddd;
}
textarea, select, .input, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
padding: 10px 10px;
margin: 0 0 10px 0;
font-size: 15px;
line-height: 1.2em;
text-transform: none;
color: #323232;
font-weight: bold;
text-decoration: none;
position: relative;
height: 47px;
border-radius: 3px;
background: #fff;
box-shadow: none;
border: 1px solid #dadada !important;
transition: all 0.3s ease 0s;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<form class="form_ai js_form_ai" action="" method="post" name="" enctype="multipart/form-data">
<div class="form_section scrollable-section form_section_image" data-section-title="1" id="scrollto-section-1">
<div class="form_caption">
<label class="form_tag form_tag_image" for="image">Фотография<span class="form_required hidden">*</span></label>
</div>
<div class="form_data">
<div class="ai_image">
<div class="ai_image__content">
<ul class="ai_image__list ui-sortable" id="sortable" rotation="0">
<li class="ai_image__upload" onclick="$('#imageupload').click();"></li>
<li class="ai_image__upload" onclick="$('#imageupload').click();"></li>
<li class="ai_image__upload" onclick="$('#imageupload').click();"></li>
<li class="ai_image__upload" onclick="$('#imageupload').click();"></li>
<li class="ai_image__upload" onclick="$('#imageupload').click();"></li>
</ul>
<input class="ai_image__file" type="file" name="images[]" accept=".jpg,.jpeg,.gif,.png,.bmp" data_url="/ai/upload_images/0" multiple="" id="imageupload">
<div class="form_info">Фотографии (максимум 5). Максимальный размер файла - 10MB. Запрещены ссылки, логотипы других сайтов. Главное фото - реальное фото вашего товара (не из интернет-каталога).</div>
</div>
</div>
</div>
</div>
<div class="item">
<label for="">Название вакансии:</label>
<input type="text" placeholder="" name="name" value="">
</div>
<div class="item">
<label for="">Должность:</label>
<input type="text" placeholder="" name="position" value="">
</div>
<button type="submit" class="btn-green">Отправить на модерацию</button>
</form>
<script type="text/javascript" src="https://content.kufar.by/js/275333343/jquery_full.min.js"></script>
<script type="text/javascript" src="https://content.kufar.by/js/275333343/jquery.fileupload.min.js"></script>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Есть небольшой плавающий блок на сайте, который закрывается только кликом на крестикразметка следующая:
Подскажите как сделать что бы в input можно было вводить дробные (или целые) числа ( пример: 11 | 1
Есть таблица в которой фиксируются все операции связанные с расходамиЕсть расход относится к типу "Аванс", то также необходимо сохранять...
Делаю запрос к таблице, поле которое я упорядочил по возрастанию УПОРЯДОЧИВАЕТСЯ, но тип ячейки текстовый, а внутри цифрыЕст-но логично изменить...