Плагин Ajax загрузки файлов

Опубликован для упрощения взаимодействия

Установка и использование

FrontEnd

<div class="is-row is-gapless">
	<span class="is-20" style="font-weight: bold;">Фотографии</span>
	<span class="is-col">
		<div id="uploads_files" class="uploads_files">
		
			<?php
			$uploadedfiles = $check['img'];
			$explode_uploadedfiles = explode(";",$uploadedfiles);
			for ($i = 0; $i < count($explode_uploadedfiles); $i++) {
				$explode_img = explode("===",$explode_uploadedfiles[$i]);
				$img = $explode_img[0];
				$index_checked = "";
				if ($explode_img[1] == 1) {
				$index_checked = 'checked';
				}
				if (is_file("uploads/store/".$img)) {
					$rand = rand(100000000,999999999);
					print '
						<div class="uploads_file '.$rand.'">
							<div>
								<a href="/images/3-600-store-'.$img.'" rel="gallery"><img src="/images/2-300-store-'.$img.'" class="image" alt="" /></a><br/><br/>
								<input type="hidden" value="'.$img.'" name="uploadedfiles[]" />
								<label for="radio'.$rand.'"><input type="radio" id="radio'.$rand.'" '.$index_checked.' name="indexfiles" value="'.$img.'" required /> Главная</label>
								<a href="javascript://" onclick="if(confirm('Вы уверены, что хотите удалить выбранную фотографию?')) delete_file_ajax(''.$img.'', ''.$rand.'');" class="submit">Удалить</a>
							</div>
						</div>
					';
				}
			}
			?>
		
		</div>
		<center><label for="multiFiles" class="button red">Загрузить фотографии</label></center>
		<input type="file" id="multiFiles" name="files[]" multiple="multiple" class="input_file" /> <img src="/img/loading_arctic.gif" style="display: none;" width="16" height="16" id="uploads_files_preloader">
	</span>
</div>
<style>
	.input_file {
		width: .1px;
		height: .1px;
		opacity: 0;
		overflow: hidden;
		position: absolute;
		z-index: -1;
	}
	.uploads_files {
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		align-items: stretch;
	}
	.uploads_file {
		margin: 0px;
		padding: 0px;
		flex: 0 0 25%;  /* (<flex-grow> | <flex-shrink> | <flex-basis>) */
		text-align: center;
	}
	.uploads_file div {
		padding: 10px;
		margin: 5px;
		background: #FFFFFF;
		border: 1px solid #EBEBEB;
	}
	@media (max-width: 900px){
		.uploads_files {
			margin: 0px;
			padding: 0px;
			display: block;
			flex-direction: column;
		}
		.uploads_file {
			margin: 0px;
			padding: 0px;
			display: block;
			flex-direction: column;
		}
	}
</style>
<script type="text/javascript">
	$(document).ready(function (e) {
		$('#multiFiles').on("change", function() {

			$('#uploads_files_preloader').show();

			var form_data = new FormData();
			var ins = document.getElementById('multiFiles').files.length;
			for (var x = 0; x < ins; x++) {
				form_data.append("files[]", document.getElementById('multiFiles').files[x]);
			}
			form_data.append("store", "<?php print $dir; ?>");
			$.ajax({
				url: '/dashboard/item_ajax.php',
				dataType: 'text',
				cache: false,
				contentType: false,
				processData: false,
				data: form_data,
				type: 'post',
				success: function (response) {
					$('#uploads_files').append(response);
					$('input[type="file"]').val('');
					$('#uploads_files_preloader').hide();
				},
				error: function (response) {
					alert('Произошла ошибка');
					console.log(response);
					$('#uploads_files_preloader').hide();
				}
			});
		});
	});
	function delete_file_ajax(file, rand) {
		$.get( "/dashboard/item_ajax.php", { delete_file: file }, function( data ) {
			if (data == 1) {
				$('.'+rand).animate({opacity: 0},500,function(){ $('.'+rand).empty(); }).animate({opacity: 1},500);
			}
		})
	}
</script>

BackEnd

Добавление

if (count($_POST['uploadedfiles'])>0) {
$sql_img_1 = ", `img`";
for($i = 0; $i < count($_POST['uploadedfiles']); $i++) {
	$indexfiles = 0;
	if ($_POST['indexfiles'] == $_POST['uploadedfiles'][$i]) {
		$indexfiles = 1;
	}
	$sql_images .= "".$_POST['uploadedfiles'][$i]."===".$indexfiles.";";
}
$sql_img_2 = ", '".$sql_images."'";
}

Редактирование

if (count($_POST['uploadedfiles'])>0) {
	for($i = 0; $i < count($_POST['uploadedfiles']); $i++) {
		$indexfiles = 0;
		if ($_POST['indexfiles'] == $_POST['uploadedfiles'][$i]) {
			$indexfiles = 1;
		}
		$sql_images .= "".$_POST['uploadedfiles'][$i]."===".$indexfiles.";";
	}
	$sql_img = ", `img` = '".$sql_images."'";
}