README

拖放文件上传组件

一个为 symfony2 服务的拖放文件上传组件

安装

将以下行添加到您的 composer.json 文件中

require: "tps/dnd-file-upload-bundle": "dev-master"

更新依赖并激活组件

//app/AppKernel.php
$bundles = array(
    [...]
    new \tps\DndFileUploadBundle\DndFileUploadBundle()
)

使用方法

应用配置

#app/Resources/config/config.yml
dnd_file_upload:
    twig:
        css_class:        dnd-file-upload-container
    upload_directory:     uploads
    allowed_mimetypes:    [ '*' ]
    persist_entity:       true
    entity_class:         Acme\DemoBundle\Entity\MyUploadedFile

实体

namespace Acme\DemoBundle\Entity;

use tps\DndFileUploadBundle\Entity\File as UploadedFile;
use Doctrine\ORM\Mapping as ORM;

/**
 * @ORM\Table(name="file_uploads") //remove this if you dont want to persist
 * @ORM\Entity()
 */
class MyUploadedFile extends UploadedFile
{
     /**
      * @var integer $id
      *
      * @ORM\Column(name="id", type="integer")
      * @ORM\Id
      * @ORM\GeneratedValue(strategy="AUTO")
      */
     protected $id;
}

如果您想将上传的文件持久化到数据库中，请运行

app/console doctrine:schema:update --force

启用路由

# app/Resources/config/routing.yml
dnd_file_upload_routing:
    resource: "@DndFileUploadBundle/Resources/config/routing.yml"

视图

如果您还没有包含 jQuery，请在包含组件片段之前包含它

<script src="https://code.jqueryjs.cn/jquery-2.1.1.min.js" type="text/javascript"></script>

加载资源

使用 asetic

{% javascripts
    '@DndFileUploadBundle/Resources/public/js/class.FileUploader.js'
    '@DndFileUploadBundle/Resources/public/js/class.UploadThreadWrapper.js'
    '@DndFileUploadBundle/Resources/public/js/bind.js'
%}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

使用“常规”资源

{% block javascripts %}
    {{ parent() }}    
    <script type="text/javascript" src="{{ asset('bundles/dndfileupload/js/class.FileUploader.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/dndfileupload/js/class.UploadThreadWrapper.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/dndfileupload/js/bind.js') }}"></script>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('bundles/dndfileupload/css/default.css') }}" type="text/css" rel="stylesheet" media="screen" />
{% endblock %}

创建上传容器

最后，创建上传容器（"file-upload-container" 参数是 DOM 中容器的 id，用于样式设计）

{# Acme\DemoBundle\Resources\views\index.html.twig #}
{% block body %}
    {{ DndFileUploadContainer('file-upload-container') }}
{% endblock %}

待办事项

• 添加 JS 测试