Как возвращать по 1 строке адрес изображения при ajax загрузке?

Question

[Виктор Янышев]

Как можно реализовать такой момент интерфейса при загрузке изображений через аякс, как показывать привью изображения при успешном сохранение изображения на сервере.

Через аякс отправляю пачку изображений на сервер, обрабатываю изображения на сервере как мне надо, и что-бы не использовать FileReader (если отправляют большую пачку фоток то страница подвисает сильно) для показа превью удачно загруженных фоток. При каждой итерации по обработке фотке отправлю урл до фотки на сервере, но аякс мне возвращает только строку все фоток. А как возвращать только одной строке и потом уже вставлять превью в интерфейсе?

/handlers/upload.php

require '../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
            }
        })
    });

Answer 1

[Максим Тимофеев]

так отправляете по одному, запросы то асинхронные, можете в js очередь создать, что бы не ожидалось более 5 файлом например, что бы сервер не заплакал
Все виджеты типа dropzone так и работают. Пачку в одном запросе никто не шлет. Потому что если ответ вернется, на этом ajax и закончится. Есть конечно страшные варианты, но зачем если велосипед уже изобрели.
Кстати вот неплохой:
www.dropzonejs.com

Comments

[Виктор Янышев]

Что-то я не подумал о отправке по одной из пачки всей. Свои шишки нужны а потом уже можно юзать и готовые решения :)

[Максим Тимофеев]

Виктор Янышев, это очень правильно, поддерживаю

Answer 2

[Stalker_RED]

Можно отправлять их не все сразу, а по очереди.

А превью можно показывать еще до отправки.
jsfiddle.net/Stalk/cvswequz

Comments

[Виктор Янышев]

Если отправляют почти 200-300 метров страница с FileReader подвисает серьезно.