Symfony - Tải lên tệp

Thành phần Symfony Form cung cấp FileTypelớp để xử lý phần tử đầu vào tệp. Nó cho phép dễ dàng tải lên hình ảnh, tài liệu, v.v. Hãy cùng chúng tôi tìm hiểu cách tạo một ứng dụng đơn giản bằng tính năng FileType.

Step 1 - Tạo một ứng dụng mới, fileuploadsample bằng cách sử dụng lệnh sau.

symfony new fileuploadsample

Step 2 - Tạo một thực thể, Student, có tên, tuổi và ảnh như trong đoạn mã sau.

src / AppBundle / Entity / Student.php

<?php 
namespace AppBundle\Entity; 
use Symfony\Component\Validator\Constraints as Assert;  class Student { 
   /** 
      * @Assert\NotBlank() 
   */ 
   private $name;  
      
   /** 
      * @Assert\NotBlank() 
   */ 
   private $age;  
      
   /** 
      * @Assert\NotBlank(message="Please, upload the photo.") 
      * @Assert\File(mimeTypes={ "image/png", "image/jpeg" }) 
   */ 
   private $photo; 
      
   public function getName() { 
      return $this->name; 
   } 
   public function setName($name) { 
      $this->name = $name; 
      return $this; 
   } 
   public function getAge() { 
      return $this->age; 
   } 
   public function setAge($age) { 
      $this->age = $age; 
      return $this; 
   } 
   public function getPhoto() { 
      return $this->photo; 
   } 
   public function setPhoto($photo) { 
      $this->photo = $photo; 
      return $this; 
   } 
}

Ở đây, chúng tôi đã chỉ định Tệp cho thuộc tính ảnh.

Step 3 - Tạo bộ điều khiển sinh viên, StudentController và một phương thức mới, addAction như được hiển thị trong đoạn mã sau.

<?php 
namespace AppBundle\Controller; 

use AppBundle\Entity\Student; 
use AppBundle\Form\FormValidationType; 
use Symfony\Bundle\FrameworkBundle\Controller\Controller; 
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; 

use Symfony\Component\HttpFoundation\Request; 
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Form\Extension\Core\Type\TextType; 
use Symfony\Component\Form\Extension\Core\Type\FileType; 
use Symfony\Component\Form\Extension\Core\Type\SubmitType;  

class StudentController extends Controller {    
   /** 
      * @Route("/student/new") 
   */ 
   public function newAction(Request $request) { 
      $student = new Student(); 
      $form = $this->createFormBuilder($student) 
         ->add('name', TextType::class) 
         ->add('age', TextType::class) 
         ->add('photo', FileType::class, array('label' => 'Photo (png, jpeg)')) 
         ->add('save', SubmitType::class, array('label' => 'Submit')) 
         ->getForm(); 
         
      $form->handleRequest($request); 
      if ($form->isSubmitted() && $form->isValid()) { 
         $file = $student->getPhoto(); 
         $fileName = md5(uniqid()).'.'.$file->guessExtension(); 
         $file->move($this->getParameter('photos_directory'), $fileName); 
         $student->setPhoto($fileName); 
         return new Response("User photo is successfully uploaded."); 
      } else { 
         return $this->render('student/new.html.twig', array( 
            'form' => $form->createView(), 
         )); 
      } 
   }   
}

Ở đây, chúng tôi đã tạo biểu mẫu cho thực thể sinh viên và xử lý yêu cầu. Khi biểu mẫu được người dùng gửi và nó hợp lệ, thì chúng tôi đã chuyển tệp đã tải lên vào thư mục tải lên của mình bằng cách sử dụng tham số,photos_directory.

Step 4 - Tạo chế độ xem, new.html.twig, sử dụng các thẻ biểu mẫu sau.

{% extends 'base.html.twig' %} 
{% block javascripts %} 
   <script language = "javascript" src = "https://code.jquery.com/jquery-2.2.4.min.js"></script> 
{% endblock %} 
{% block stylesheets %} 
   <style> 
      #simpleform { 
         width:600px; 
         border:2px solid grey; 
         padding:14px; 
      }  
      #simpleform label { 
         font-size:12px; 
         float:left; 
         width:300px; 
         text-align:right; 
         display:block; 
      } 
      #simpleform span { 
         font-size:11px; 
         color:grey; 
         width:100px; 
         text-align:right; 
         display:block; 
      }  
      #simpleform input { 
         border:1px solid grey; 
         font-family:verdana; 
         font-size:14px; 
         color:grey; 
         height:24px; 
         width:250px; 
         margin: 0 0 20px 10px; 
      }  
      #simpleform button { 
         clear:both; 
         margin-left:250px; 
         background:grey; 
         color:#FFFFFF; 
         border:solid 1px #666666; 
         font-size:16px; 
      } 
   </style> 
{% endblock %} 
{% block body %} 
   <h3>Student form</h3> 
   <div id="simpleform"> 
      {{ form_start(form) }} 
      {{ form_widget(form) }} 
      {{ form_end(form) }} 
   </div>   
{% endblock %}

Step 5 - Đặt tham số, photos_directory trong tệp cấu hình tham số như sau.

app / config / config.xml

parameters: photos_directory: '%kernel.root_dir%/../web/uploads/photos'

Step 6- Bây giờ, chạy ứng dụng và mở http: // localhost: 8000 / student / new và tải lên một bức ảnh. Ảnh đã tải lên sẽ được tải lên photos_directory và thông báo thành công sẽ được hiển thị.

Kết quả: Trang đầu tiên

Kết quả: Trang tải lên tệp