Как показать превью при загрузке фотографий

302
13 мая 2021, 20:50

Нужно показать превью при выборе фотографий. На данный момент форма выглядит вот так

Мой FormType

    <?php

namespace App\Form\Type;

use App\Entity\Portfoliodev;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\Extension\Core\Type\FileType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
class PortfoliodevType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('name', TextType::class, array(
                'label' => 'Название работы *',
                'attr' => array(
                    'placeholder' => 'Например: TraceX',
                ),
                'required' => true
            ))
          ->add('types', ChoiceType::class, [
               'choices'  => [
                   'Web-разработка' => 1,
                   'Android-разработка' => 2,
                   'IOS-разработка' => 3,
                   'Desktop-разработка' => 4,
                   'Разработка библиотеки' => 5,
               ]])
            ->add('description', TextareaType::class, array(
                'label' => 'Описание *',
                'attr' => array(
                    'placeholder' => 'Опишите ваше обявление в двух словах...',
                ),
                'required' => true
            ))
            ->add('linkweb', TextType::class, array(
                'label' => 'Ссылка на работу *',
                'attr' => array(
                    'placeholder' => 'Например: www.TraceX.ru',
                ),
                'required' => true
            ))
            ->add('workDev', FileType::class, [
                'multiple' => true,
                'label'=>'Выберите постеры',
                'mapped'=>false,
                'attr'     => [
                    'accept' => 'image/*',
                ]
            ])
            ->add('order', TextType::class, array(
                'label' => 'Приоритет*',
                'attr' => array(
                    'placeholder' => 'Например: 3-й по счету',
                ),
                'required' => true
            ));
    }
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults( array(
            'data_class' => Portfoliodev::class
        ));
    }
}

Мой Controller

<?php

namespace App\Controller\admin;

use App\Entity\Image;
use App\Entity\Portfoliodev;
use App\Form\Type\PortfoliodevType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

/**
 * Class ClientController
 * @package Admin\Controller
 * @Route("/admin/portfoliodev", name="admin_portfoliodev_")
 */
class PortfolioContoller extends AbstractController
{
    const MODULE_NAME = 'Porfolio';
    const VIEW = self::MODULE_NAME . '_VIEW';
    const CREATE = self::MODULE_NAME . '_CREATE';
    const UPDATE = self::MODULE_NAME . '_UPDATE';
    const DELETE = self::MODULE_NAME . '_DELETE';

    /**
     * @Route("/", name="index")
     */
    public function indexAction()
    {
        $this->denyAccessUnlessGranted(self::VIEW);
        return $this->render('admin/portfoliodev/index.html.twig');
    }

    /**
     * Добавление объявления
     *
     * @Route("/add", name="add")
     *
     * @param Request $request
     * @return Response
     */
    public function createAction(Request $request)
    {
        $this->denyAccessUnlessGranted(self::CREATE);
        $portfoliodev = new Portfoliodev();
        $form = $this->createForm(PortfoliodevType::class,$portfoliodev);
        $form->handleRequest($request);
        if ($form->isSubmitted() && $form->isValid()) {
           $imageFile = $form->get('workDev')->getData();
         //   $file = $request ->files->get('post')['imageLink'];

            foreach ($imageFile as $img){
                $uploads_directory = $this->getParameter('ImageUsers_directory');
                $filename = md5(uniqid()) . '.'. $img->guessExtension();
                $img->move(
                    $uploads_directory,
                    $filename
                );
                $image = new Image();
                $image->setImageLink($filename);
                $portfoliodev ->addWorkDev($image);
            }



            $entityManager = $this->getDoctrine()->getManager();
            $entityManager->persist($portfoliodev);
            $entityManager->flush();
            return $this->redirectToRoute('admin_portfoliodev_index');
        }
        return $this->render('admin/portfoliodev/add.html.twig', array(
            'form' => $form->createView()
        ));
    }


}

Что можете посоветовать ?

Answer 1

function readURL(input) { 
  if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
     
    reader.onload = function(e) { 
      $('#steam').attr('src', e.target.result); 
    } 
     
    reader.readAsDataURL(input.files[0]); 
  } 
} 
 
$("#imgInp").change(function() { 
  readURL(this); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form runat="server"> 
  <input type='file' id="imgInp" /> 
  <img id="steam" src="#" alt="your image" /> 
</form>

READ ALSO
Могу ли я добавить setInterval для каждого шага for?

Могу ли я добавить setInterval для каждого шага for?

Я захотел повернуть элемент на страницеЧтобы он не поворачивался мгновенно я добавил setInterval, который, как я думал, добавит задержку для каждого...

111
Как правильно передать на сервер csrf-токен с content-type != текст

Как правильно передать на сервер csrf-токен с content-type != текст

С обычным content-type='Content-Type' и "application/x-www-form-urlencoded" проблем нетНо все мои попытки отправить на сервер с помощью FormData либо application/json терпят неудачу

87
Django реализация сложного сценария с динамическими формами

Django реализация сложного сценария с динамическими формами

В процессе разработки своего тренировочного проекта появилась потребность реализовать следующий сценарий для ввода параметром n количества...

289
Как интегрировать статистику аккаунта Stack Overflow в свой сайт?

Как интегрировать статистику аккаунта Stack Overflow в свой сайт?

У меня есть среда для разработки сайтов

104