Стоит задача: вывести в цикле массив (получен стандартным образом из базы данных) так, чтобы можно было добавлять и удалять записи, а также редактировать каждую запись (и каждое поле в записи!) по отдельности.
Естественно, вывод осуществляется в форму и в цикле.
<?php
get_categories(); //ПОЛУЧЕНИЕ ДАННЫХ ИЗ БД И ЗАПИСЬ ИХ В МАССИВ
$num_cat = count($cat_array); //cat_array - МАССИВ ДАННЫХ ИЗ БД
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ВОЗМОЖНО ОШИБКА ЗДЕСЬ В content
<meta http-equiv="Content-Language" content="ru">
<title>КАТЕГОРИИ</title>
<!-- JS СКРИПТЫ -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/ajaxupload.js"></script>
<script type="text/javascript" src="./js/script.js"></script>
<!-- ТАБЛИЦЫ CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div class="container-fluid">
<?php
foreach ($cat_array as $cat_key => $cat_value) {
$class_preview = "image-preview-" . $cat_key;
$id_preview = "preview-" . $cat_key;
$form_id = "upload-image-" . $cat_key;
$name_id_input_file = "image-" . $cat_key;
?>
<div class="row">
<div class="col-md-2 my-auto">
<div class="<?php echo $class_preview; ?>">
<img class="logo-class" id="<?php echo $id_preview; ?>" src="./images/<?php echo $cat_value['ImgCatName']; ?>" />
</div>
</div>
<div class="col-md-2 my-auto">
<form id="<?php echo $form_id; ?>" enctype="multipart/form-data">
<div class="form-group">
<input class="choose-file-button" type="file" name="<?php echo $name_id_input_file; ?>" id="<?php echo $name_id_input_file; ?>">
</div>
<input class="choose-file-button" type="submit" value="Сохранить на сервер">
</form>
</div>
</div>
<?php } ?>
</body>
Код ajaxupload.js:
function readImage ( input ) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#'+<?php echo $id_preview; ?>).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$('#'+<?php echo $name_id_input_file; ?>).change(function(){
readImage(this);
});
$('#'+<?php $form_id; ?>).on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type:'POST', // Тип запроса
url: 'handler.php', // Скрипт обработчика
data: formData, // Данные которые мы передаем
cache:false, // В запросах POST отключено по умолчанию, но перестрахуемся
contentType: false, // Тип кодирования данных мы задали в форме, это отключим
processData: false, // Отключаем, так как передаем файл
success:function(data){},
error:function(data){console.log(data);}
});
}));
});
И, наконец, обработчик формы handler.php:
<?php
$imagedir = './images/';
if(isset($_FILES) && isset($_FILES['image'])) {
$image = $_FILES['image'];
$imageFormat = explode('.', $image['name']);
$imageFormat = $imageFormat[1];
$imageFullName = $imagedir . $image['name'];
$imageType = $image['type'];
}
?>
Пожалуйста, не обращайте внимания на отсутствие проверок в коде обработчика - они есть, аздесь я намеренно их убрал, чтобы укоротить код.
Теперь суть проблемы: с одной, отдельной картинкой коды работают безупречно. Но только потому, что я указываю в атрибутах id и name формы точные текстовые значения. В javascript, соответственно, тоже. Но как только я пытаюсь использовать php переменные, то все работать перестает.
P.S. В строках обработчика
if(isset($_FILES) && isset($_FILES['image'])) {
$image = $_FILES['image'];
заменил 'image' на $name_id_input_file - не помогло.
