ThinkPHP использует Ajax для асинхронной загрузки изображений, их отображения и удаления

Автор оригинала: David Wong.

Недавно, в процессе изучения tp5, в проекте появилась функция публикации для выбора тематических картинок. Следующим образом:

Используя обработку загрузки исходного файла, хотя исходная инструкция JS может отображать загруженные изображения в режиме реального времени, но это повлечет за собой множество проблем с совместимостью. Используя технологию Ajax для выборочного удаления выбранных изображений, проблем с совместимостью не возникнет.

Форма форма файла:

    Theme picture:
    
    
        picture upload
        
     

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

Код JavaScript:

После нажатия на выбранную картинку она передается на сервер. Файл интерфейса PHP:

public function upimg()
    {
        // verification
        $file = request()->file('img');
        // Move to the framework application root / public / uploads / directory
        if($file){
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
            if($info){
                // Get upload information after successful upload
                $img_src = '/uploads/'.$info->getSaveName();
                Echo $img_src; // Return Ajax request
            }else{
                // Failure to upload to get error information
                $this->error($file->getError());
            }
        }
    }

Улучшенная диаграмма эффектов: