Symfony2: Przesyła plik za pomocą Ajax i jQuery

Question

Mam aplikację Symfony2 z formularzem, w którym znajduje się pole typu pliku. Muszę przesłać obraz tam student, więc pomogłem tej dokumentacji: How to Upload Files

To jest mój kodu:

Kontroler:

public function createAction(Request $request) 
{   
    if ($request->isXmlHttpRequest() && !$request->isMethod('POST')) { 
    throw new HttpException('XMLHttpRequests/AJAX calls must be POSTed'); 
    } 

    $entity = new Student(); 
    $form = $this->createCreateForm($entity); 
    $form->handleRequest($request); 

    if ($form->isValid()) { 
     $file = $entity->getPhoto(); 

     $fileName = md5(uniqid()).'.'.$file->guessExtension(); 

     $photoDir = $this->container->getParameter('kernel.root_dir').'/../web/uploads/images'; 

     $file->move($photoDir, $fileName); 

     $entity->setPhoto($fileName); 

     $em = $this->getDoctrine()->getManager(); 
     $em->persist($entity); 
     $em->flush(); 

     if ($request->isXmlHttpRequest()) { 
      return new JsonResponse(array('message' => 'Success!','success' => true), 200); 
     } 

     if ($request->isMethod('POST')) { 
     return new JsonResponse(array('message' => 'Invalid form','success' => false), 400); 
    } 

     return $this->redirect($this->generateUrl('student_show', array('id' => $entity->getId()))); 
    } 
    return $this->render('BackendBundle:Student:new.html.twig', array(
     'entity' => $entity, 
     'form' => $form->createView(), 
    )); 
} 

Podmiot:

use Doctrine\ORM\Mapping as ORM; 
    use Symfony\Component\Validator\Constraints as Assert; 

    //... 
    /** 
    * @var string 
    * 
    * @ORM\Column(name="photo", type="string", length=255, nullable=true) 
    * 
    */ 
    private $photo; 


    public function setPhoto($photo) 
    { 
    $this->photo = $photo; 

    return $this; 
    } 

    public function getPhoto() 
    { 
    return $this->photo; 
    } 

formtype :

//... 

    ->add('photo', 'file', array('required' => false)) 

    //... 

Javascript:

//... 

$('.form_student').on("submit",function(event) { 
event.preventDefault(); 

$.ajax({ 
    type: 'POST', 
    url: Routing.generate('student_create'), 
    data: $(this).serialize(), 
    dataType: 'json', 

    success: function(response) { 

    alert(response.message); 
    }, 
    error: function (response, desc, err){ 
     if (response.responseJSON && response.responseJSON.message) { 
     alert(response.responseJSON.message); 
     } 
     else{ 
     alert(desc); 
     } 
    } 
}); 
}); 

Problem mam teraz jest muszę zrobić to z żądania Ajax, ale nie wiem, jak wysłać to pole pliku i może być stosowany wówczas kontroler Symfony.

Widziałem niektóre FormData(), ale nie wiem, w jaki sposób jest używany.

Czy możesz mi pomóc?

Answer 1

I został rozwiązany zmianę w moim kodu:

• data: new FormData($(this)[0]) zamiast data: $ (this).serialize()

• Dodanie żądania ajax:

  processData: false, contentType: false, cache: false,

, a plik zostanie wysłany poprawnie

Answer 2

Aktualizacja:

Myślę, że problemem jest to, że trzeba deserializowania odebrany w kontrolerze w przypadku, gdy złożenie poprzez AJAX

Addentionally należy szeregować formę wyraźnie i nie serializacji przy użyciu tej this

var data= $('form.form_student').serialize(); 

Answer 3

Mam rozwiązać to w następujący sposób, jeśli chcesz to zrobić za pomocą Ajax.

W swojej jednostce zadeklarować tak:

/** 
*@ORM\HasLifecycleCallbacks 
*/ 
class Student 
{ 
    /** 
    * @ORM\Column(type="string", length=255, nullable=true) 
    */ 
    public $path; 

    /** 
    * @Assert\File(
    * maxSize="60000", 
    *) 
    */ 
    private $file; 

    private $temp; 

    /** 
    * Sets file. 
    * 
    * @param UploadedFile $file 
    */ 
    public function setFile(UploadedFile $file = null) 
    { 
     $this->file = $file; 
     if (isset($this->path)) { 
      // store the old name to delete after the update 
      $this->temp = $this->path; 
      $this->path = null; 
     } else { 
      $this->path = 'initial'; 
     } 
    } 

    /** 
    * Get file. 
    * 
    * @return UploadedFile 
    */ 
    public function getFile() 
    { 
     return $this->file; 
    } 

    public function getAbsolutePath() 
    { 
     return null === $this->path 
      ? null 
      : $this->getUploadRootDirPath().'/'.$this->path; 
    } 

    public function getWebPath() 
    { 
     return null === $this->path 
      ? null 
      : $this->getUploadDirPath().'/'.$this->path; 
    } 

    protected function getUploadRootDirPath() 
    { 
     // the absolute directory path where uploaded 
     // documents should be saved 
     return __DIR__.'/../../../../web/'.$this->getUploadDirPath(); 
    } 

    protected function getUploadDirPath() 
    { 
     // get rid of the __DIR__ so it doesn't screw up 
     // when displaying uploaded doc/image in the view. 
     return 'uploads/student_photos'; 
    } 

    /** 
    * @ORM\PrePersist() 
    * @ORM\PreUpdate() 
    */ 
    public function preUpload() 
    { 
     if (null !== $this->getFile()) { 
      // do whatever you want to generate a unique name 
      $filename = basename($this->getFile()->getClientOriginalName(),'.'.$this->getFile()->getClientOriginalExtension()); 
      $this->path = $filename.'.'.$this->getFile()->getClientOriginalExtension(); 
      if(file_exists($this->getUploadRootDirPath().'/'.$this->path)==1) 
      { 
       $date = date('-d_M_Y_H:i'); 
       $this->path = $filename.$date.'.'.$this->getFile()->getClientOriginalExtension(); 
      } 
     } 
    } 

    /** 
    * @ORM\PostPersist() 
    * @ORM\PostUpdate() 
    */ 
    public function upload() 
    { 
     if (null === $this->getFile()) { 
      return; 
     } 

     $this->getFile()->move($this->getUploadRootDirPath(), $this->path); 

     if (isset($this->temp)) { 
      // delete the old image 
      unlink($this->getUploadRootDirPath().'/'.$this->temp); 
      // clear the temp image path 
      $this->temp = null; 
     } 
     $this->file = null; 
    } 


    /** 
    * @ORM\PostRemove() 
    */ 
    public function removeUpload() 
    { 
     $file = $this->getAbsolutePath(); 
     if ($file) { 
      unlink($file); 
     } 
    } 
} 

W swojej FormType:

->add('file', null, array('label' => 'Profile Picture', 'required' => false)) 

W Tobie Kontroler:

$entity->setFile($request->files->get('photo')); //here you have get your file field name 
    $em->persist($entity); 
    $em->flush(); 

Twój ajax wygląda w porządku, ale jeśli to nie zadziała niż używać

data:new FormData(this), 

zamiast

data: $(this).serialize(), 

i dodać te dwa parametry w Ajax:

 processData: false, 
     contentType: false 

Można zmienić sposób zapisać plik jako wymóg i zmienić polu Ścieżka do fotografii.