README

要求

Symfony 4
PHP 7.1.3 或更高版本
jQuery

安装

步骤 1：下载包

打开命令行，进入您的项目目录，然后执行以下命令以下载该包的最新稳定版本

$ composer require tboileau/upload-bundle

此命令需要您全局安装了 Composer，如 Composer 文档的安装章节中所述。

步骤 2：启用包

然后，通过将其添加到项目 config/bundles.php 文件中注册的包列表中来启用包

<?php
// config/bundles.php

return [
    //...
    TBoileau\UploadBundle\TBoileauUploadBundle::class => ['all' => true],
    //...
];

配置

步骤 1：添加新的配置 yaml 文件

在 config/package 目录中创建一个新的 yaml 文件，命名为 t_boileau_upload.yaml

# config/packages/t_boileau_upload.yaml
t_boileau_upload:
    upload_dir: '%kernel.project_dir%/public/uploads'
    web_path: '/public/uploads'

upload_dir：包含所有上传文件的目录。
web_path：上传文件相对路径的前缀。

步骤 2：添加路由配置

在 config/routes.yaml 中添加路由配置

# config/routes.yaml
t_boileau_upload_bundle:
    resource: '@TBoileauUploadBundle/Controller'
    type:     annotation
    prefix:   /t_boileau_upload

别忘了安装资产。

在开发环境中使用符号链接

php bin/console assets:install --symlink

在生产环境中使用复制

php bin/console assets:install public

额外：覆盖小部件

实际小部件的示例

{% block upload_widget -%}
    {{-block("hidden_widget") -}}
    <div class="upload-box" data-rel="{{ form.vars.id }}">
        <div class="upload-box-input">
            <input type="file" class="upload-box-file" id="file-{{ form.vars.id }}" data-rel="{{ form.vars.id }}"/>
            <svg class="upload-box-icon" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43"><path d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z"></path></svg>
            <label for="file-{{ form.vars.id }}" class="upload-box-label"></label>
        </div>
        <div class="upload-box-uploading">
            <span class="upload-box-uploading-text"></span>
            <div class="upload-box-progressbar"><div class="upload-box-progress"></div></div>
        </div>
        <div class="upload-box-success">

        </div>
        <div class="upload-box-error"></div>
    </div>
{%- endblock %}

您可以只保留输入文件如下

{% block upload_widget -%}
    {{-block("hidden_widget") -}}
    <input type="file" class="upload-box-file" data-rel="{{ form.vars.id }}"/>
{%- endblock %}

保留类和 data-rel 属性。

用法

步骤 1：使用上传字段类型

<?php

    namespace App\Form;

    use Symfony\Component\Form\AbstractType;
    use Symfony\Component\Form\FormBuilderInterface;
    use TBoileau\UploadBundle\Form\UploadType;
    
    class FooType extends AbstractType
    {
        public function buildForm(FormBuilderInterface $builder, array $options)
        {
            $builder->add('bar', UploadType::class);
        }
    }

您可以在字段上添加选项，推荐以获得更高的安全性

<?php

    //...
    $builder->add('bar', UploadType::class, [
        "mime_types" => ["image/png", "image/gif", "image/jpeg"],
        "max_size" => "2M",
        "image" => [
            "minRatio" => 4/3,
            "maxRatio" => 16/9,
            "minWidth" => 400,
            "maxWidth" => 800,
            "minHeight" => 300,
            "maxHeight" => 600
        ]
    ]);    
    //...

mime_types：检查此 MIME 类型列表
max_size：参照此正则表达式 /^\d+[O|K|M]$/。
image：您可以指定一些规格，如比例、宽度和高度。

步骤 2：将资产添加到您的视图或模板中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            <link rel="stylesheet" href="{{ asset("bundles/tboileauupload/css/upload.css") }}">
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
            <script src="{{ asset("bundles/tboileauupload/js/upload.js") }}"></script>
        {% endblock %}
    </body>
</html>

别忘了在上传脚本之前添加 jQuery。

步骤 3：JavaScript 使用

$("seletor").upload({
    texts: {
        error: "An error occured.",
        maxSizeRegex: "Max size is not valid.",
        missingAttributes: "Missing 'image' attributes.",
        tooManyAttributes: "Too many 'image' attributes.",
        noFile : "No file selected.",
        sizeTooBig : "Your file is too big.",
        imgTooBig : "Your image is too big.",
        imgTooSmall : "Your image is too small.",
        imgRatioTooBig : "The ratio of your image is too big.",
        imgRatioTooSmall : "The ratio of your image is too small.",
        mimeTypeError : "Your file is not valid.",
        success: "Cancel and upload an another one ?",
        label: "<strong>Choose a file</strong> or drag it here",
        uploading: "Uploading..."
    },
    onUpload: function(loaded, total) {
        var valueNow = Math.ceil(loaded / total) * 100;
        console.log(valueNow + "%");
    },
    onSuccess: function(response) {
        $input.val(response.file);
    },
    onError: function(response) {
        defaults.texts[response.message];
    }
});

$input：它指的是包含上传文件相对路径的字段。
texts : 包含所有消息（请检查文件模型中的验证器消息键）。
onUpload : 在上传过程中调用的事件。
onError : 发生错误时调用的事件。
onSuccess : 上传完成后调用的事件。

tboileau / upload-bundle

维护者

详情