Symfony3动态字段表单开发咨询：多文件上传及对应描述输入

Hey there! Let's tackle this Symfony 3 form problem you're working on—building a form that lets users upload any number of files, each with its own description text input. I've done this a few times before, so here's a step-by-step breakdown that should work for you:

1. 定义实体类 #

首先，我们需要两个实体：一个用来承载整个文件集合（比如FileCollection），另一个用来表示单个文件+描述的组合（比如AttachedFile）。

AttachedFile 实体（单个文件+描述） #

// src/AppBundle/Entity/AttachedFile.php
namespace AppBundle\Entity;

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

/**
 * @ORM\Entity
 */
class AttachedFile
{
    /**
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     * @ORM\Column(type="integer")
     */
    private $id;

    /**
     * @ORM\Column(type="string", length=255)
     * @Assert\NotBlank(message="Please add a description for this file")
     */
    private $description;

    /**
     * @ORM\Column(type="string", length=255)
     */
    private $fileName;

    /**
     * @Assert\File(
     *     maxSize="5M",
     *     mimeTypes={"image/jpeg", "image/png", "application/pdf", "application/msword"}
     * )
     */
    private $file;

    /**
     * @ORM\ManyToOne(targetEntity="FileCollection", inversedBy="attachedFiles")
     * @ORM\JoinColumn(nullable=false)
     */
    private $collection;

    // Getters and Setters
    public function getId() { return $this->id; }
    public function setDescription($description) { $this->description = $description; return $this; }
    public function getDescription() { return $this->description; }
    public function setFileName($fileName) { $this->fileName = $fileName; return $this; }
    public function getFileName() { return $this->fileName; }
    public function setFile(File $file = null) { $this->file = $file; return $this; }
    public function getFile() { return $this->file; }
    public function setCollection(FileCollection $collection) { $this->collection = $collection; return $this; }
    public function getCollection() { return $this->collection; }
}

FileCollection 实体（文件集合容器） #

// src/AppBundle/Entity/FileCollection.php
namespace AppBundle\Entity;

use Doctrine\Common\Collections\ArrayCollection;
use Doctrine\ORM\Mapping as ORM;

/**
 * @ORM\Entity
 */
class FileCollection
{
    /**
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     * @ORM\Column(type="integer")
     */
    private $id;

    /**
     * @ORM\OneToMany(targetEntity="AttachedFile", mappedBy="collection", cascade={"persist", "remove"})
     */
    private $attachedFiles;

    public function __construct()
    {
        $this->attachedFiles = new ArrayCollection();
    }

    // Add/Remove methods for attachedFiles
    public function addAttachedFile(AttachedFile $file)
    {
        $file->setCollection($this);
        $this->attachedFiles->add($file);
        return $this;
    }

    public function removeAttachedFile(AttachedFile $file)
    {
        $this->attachedFiles->removeElement($file);
        return $this;
    }

    // Getters and Setters
    public function getId() { return $this->id; }
    public function getAttachedFiles() { return $this->attachedFiles; }
}

2. 创建表单类型 #

接下来，我们需要定义两个表单类型：一个用于单个文件+描述，另一个用于整个集合。

AttachedFileType 表单 #

// src/AppBundle/Form/AttachedFileType.php
namespace AppBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\FileType;

class AttachedFileType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('description', TextType::class, [
                'label' => 'File Description'
            ])
            ->add('file', FileType::class, [
                'label' => 'Upload File'
            ]);
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => 'AppBundle\Entity\AttachedFile'
        ]);
    }
}

FileCollectionType 表单（核心集合表单） #

// src/AppBundle/Form/FileCollectionType.php
namespace AppBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\CollectionType;

class FileCollectionType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('attachedFiles', CollectionType::class, [
                'entry_type' => AttachedFileType::class,
                'allow_add' => true,
                'allow_delete' => true,
                'by_reference' => false, // 重要！因为我们使用了自定义的add/remove方法
                'prototype' => true, // 用于JS动态添加新条目
                'label' => false
            ]);
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => 'AppBundle\Entity\FileCollection'
        ]);
    }
}

3. 控制器处理逻辑 #

现在编写控制器来处理表单的渲染和提交，包括文件上传的处理。

// src/AppBundle/Controller/FileController.php
namespace AppBundle\Controller;

use AppBundle\Entity\FileCollection;
use AppBundle\Form\FileCollectionType;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\File\UploadedFile;

class FileController extends Controller
{
    public function uploadAction(Request $request)
    {
        $collection = new FileCollection();
        $form = $this->createForm(FileCollectionType::class, $collection);

        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            $em = $this->getDoctrine()->getManager();
            
            foreach ($collection->getAttachedFiles() as $attachedFile) {
                /** @var UploadedFile $file */
                $file = $attachedFile->getFile();
                if ($file) {
                    // 生成唯一文件名避免覆盖
                    $fileName = md5(uniqid()).'.'.$file->guessExtension();
                    
                    // 将文件移动到上传目录
                    $file->move(
                        $this->getParameter('upload_directory'), // 在config.yml中定义这个参数
                        $fileName
                    );
                    
                    $attachedFile->setFileName($fileName);
                }
            }

            $em->persist($collection);
            $em->flush();

            $this->addFlash('success', 'Files uploaded successfully!');
            return $this->redirectToRoute('file_upload');
        }

        return $this->render('file/upload.html.twig', [
            'form' => $form->createView()
        ]);
    }
}

别忘了在app/config/config.yml里添加上传目录的参数：

# app/config/config.yml
parameters:
    upload_directory: '%kernel.root_dir%/../web/uploads'

4. Twig 模板渲染 #

最后，编写模板来渲染表单，并且添加JavaScript支持动态添加新的文件+描述输入框。

{# app/Resources/views/file/upload.html.twig #}
{% extends 'base.html.twig' %}

{% block body %}
    <h1>Upload Files with Descriptions</h1>

    {{ form_start(form) }}
        <div id="attached-files-container">
            {{ form_widget(form.attachedFiles) }}
        </div>

        <button type="button" id="add-file-btn" class="btn btn-success">Add Another File</button>
        <br><br>
        <button type="submit" class="btn btn-primary">Upload All Files</button>
    {{ form_end(form) }}

    {# 新文件条目的原型模板 #}
    {% set prototype = form.attachedFiles.vars.prototype %}
    <div id="file-prototype" style="display:none;">
        {{ form_widget(prototype) }}
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const addBtn = document.getElementById('add-file-btn');
            const container = document.getElementById('attached-files-container');
            const prototype = document.getElementById('file-prototype').innerHTML;
            let index = container.children.length;

            addBtn.addEventListener('click', function() {
                // 将原型中的__name__占位符替换为实际索引
                let newForm = prototype.replace(/__name__/g, index);
                container.insertAdjacentHTML('beforeend', newForm);
                index++;
            });
        });
    </script>
{% endblock %}

一些额外注意事项 #

• 文件验证：我在AttachedFile实体里加了基本的文件大小和MIME类型验证，你可以根据需求调整这些规则。
• 文件存储：这里我们把文件存在web/uploads目录下，生产环境中你可能需要考虑更安全的存储方式（比如外部存储服务）。
• 表单样式：模板里用了Bootstrap类，你可以根据自己的前端框架调整样式。
• 删除功能：如果需要让用户删除已添加的文件条目，你可以给每个条目加一个删除按钮，然后用JS移除对应的DOM元素（Symfony的CollectionType会自动处理后端的删除逻辑，只要allow_delete设为true）。

内容的提问来源于stack exchange，提问作者mR.Rian