Как можно реализовать такой момент интерфейса при загрузке изображений через аякс, как показывать привью изображения при успешном сохранение изображения на сервере.
Через аякс отправляю пачку изображений на сервер, обрабатываю изображения на сервере как мне надо, и что-бы не использовать FileReader (если отправляют большую пачку фоток то страница подвисает сильно) для показа превью удачно загруженных фоток. При каждой итерации по обработке фотке отправлю урл до фотки на сервере, но аякс мне возвращает только строку все фоток. А как возвращать только одной строке и потом уже вставлять превью в интерфейсе?
/handlers/upload.phprequire '../component/Gallery.php';
if(!empty($_POST['title']) && !empty($_POST['date'])) {
if(count($_FILES['photos']['name']) > 0) {
$photo = new Gallery();
$photo->name = trim(htmlentities($_POST['title']));
$photo->date = trim(htmlentities($_POST['date']));
$photo->photo = $_FILES['photos'];
$photo->upload();
}
}
Gallery.php
public function upload() {
for($i = 0; count($this->photo['name']) > $i; $i++) {
if($this->photo['error'][$i] == 0) {
$this->createDir();
move_uploaded_file($this->photo['tmp_name'][$i], $this->upload_dir.'/'.$this->photo['name'][$i]);
echo $this->show_dir.'/'.$this->photo['name'][$i];
}
}
}
Ajax$(document).on('submit', '#upload_form', function(e) {
e.preventDefault();
let formData = new FormData(this);
$.ajax({
type: 'POST',
url: '/handlers/upload.php',
data: formData,
contentType: false,
processData: false,
success: function(data) {
console.log(data); // /uploads/gallery/1/IMG_1210.jpg/uploads/gallery/1/IMG_1234.jpg/uploads/gallery/1/IMG_1258.jpg
}
})
});
