Symfony-file-uploading

symfony-ファイルのアップロード

Symfony Formコンポーネントは、ファイル入力要素を処理する FileType クラスを提供します。 画像、ドキュメントなどを簡単にアップロードできます。 FileType機能を使用して簡単なアプリケーションを作成する方法を学びましょう。

ステップ1 *-次のコマンドを使用して、新しいアプリケーション *fileuploadsample を作成します。

symfony new fileuploadsample

Copy

ステップ2 *-次のコードに示すように、名前、年齢、写真を持つエンティティ *Student を作成します。

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;
   }
}

Copy

ここでは、写真プロパティにファイルを指定しました。

• ステップ3 *-次のコードに示すように、生徒用コントローラー、StudentController、および新しいメソッドaddActionを作成します。

<?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/newl.twig', array(
            'form' => $form->createView(),
         ));
      }
   }
}

Copy

ここでは、学生エンティティのフォームを作成し、リクエストを処理しました。 フォームがユーザーによって送信され、有効な場合、パラメーター photos_directory を使用して、アップロードされたファイルをアップロードディレクトリに移動しました。

ステップ4 *-以下のフォームタグを使用して、ビュー *newl.twig を作成します。

{% extends 'basel.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 %}

Copy

ステップ5 *-次のように、パラメータ設定ファイルでパラメータ *photos_directory を設定します。

app/config/config.xml

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

Copy

• ステップ6 *-次に、アプリケーションを実行してhttp：//localhost：8000/student/newを開き、写真をアップロードします。 アップロードされた写真はphotos_directoryにアップロードされ、成功したメッセージが表示されます。

結果：最初のページ

ファイルアップロード初期ページ

結果：ファイルアップロードページ

ファイルアップロード最終ページ