fileupload мультизагрузка

132
13 июня 2019, 03:00

Есть форма, подскажите как организовать мультизагрузку при помощи 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> 

READ ALSO
Показ блока при открытии страницы и через какое-то время нахождения на сайте с помощью localstorage

Показ блока при открытии страницы и через какое-то время нахождения на сайте с помощью localstorage

Есть небольшой плавающий блок на сайте, который закрывается только кликом на крестикразметка следующая:

126
Float в input value с помощью jquery mask query

Float в input value с помощью jquery mask query

Подскажите как сделать что бы в input можно было вводить дробные (или целые) числа ( пример: 11 | 1

110
Пустое значение (NULL) или отдельная таблица?

Пустое значение (NULL) или отдельная таблица?

Есть таблица в которой фиксируются все операции связанные с расходамиЕсть расход относится к типу "Аванс", то также необходимо сохранять...

142
Упорядочить в запросе поле varchar как int

Упорядочить в запросе поле varchar как int

Делаю запрос к таблице, поле которое я упорядочил по возрастанию УПОРЯДОЧИВАЕТСЯ, но тип ячейки текстовый, а внутри цифрыЕст-но логично изменить...

128