README

Cropload 是一个简单的上传和裁剪管理器，用于表单的单个文件上传。它提供所有工具，让您在几分钟内为任何表单添加上传和裁剪字段。

依赖

PHP / 由 Composer 管理

OneUploaderBundle: https://github.com/1up-lab/OneupUploaderBundle
LiipImagineBundle: https://github.com/liip/LiipImagineBundle

JavaScript / CSS 或 Less / 您可以使用 Bower 管理这些

Jquery: https://jqueryjs.cn/
Jquery UI: https://jqueryui.jqueryjs.cn/
Blueimp JavaScript 文件上传: https://blueimp.github.io/jQuery-File-Upload/
Cropper: https://fengyuanchen.github.io/cropper/
Bootstrap 3，了解如何安装和使用：https://bootstrap.ac.cn/

截图

带有嵌入进度条的文件上传：

带有实时预览的图像裁剪：

安装包

安装

使用 composer

composer require thunken/croploadbundle

在 Symfony 中注册包

app/AppKernel.php

public function registerBundles()
    {
        $bundles = [
            // ...
            new Thunken\CroploadBundle\ThunkenCroploadBundle(),
    // ...

配置包

app/config/config.yml，添加以下参数（您可以将 upload_web_dir 改为您所需的路径）

parameters:
    root_web_dir: "%kernel.root_dir%/../web"
    upload_web_dir: "media/uploads"
    upload_root_dir: "%root_web_dir%/%upload_web_dir%"

oneup_uploader:
  mappings:
    post: # Your mapping name for a post in this example (call this an endpoint)
      frontend: blueimp # For now, only blueimp is handled
      storage:
        directory: "%upload_root_dir%/post" # Your upload folder for a post
      namer: cropload.date_chunk_namer # Upload namer for a post
    category: # Your mapping name for a category in this example
      frontend: blueimp # For now, only blueimp is handled
      storage:
        directory: "%upload_root_dir%/category"
      namer: cropload.date_chunk_namer # Upload namer for a category

创建或修改表单以添加您的 Cropload 字段

表单类型

<?php

namespace Acme\BlogBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\HiddenType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Thunken\CroploadBundle\Form\DimensionType;

class PostType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options) {
        $builder
            // ...
            ->add('illustration', ImageUploadType::class, [
                'required' => false,
                'upload_endpoint' => 'post', // Mandatory: upload endpoint defined in OneUploaderBundle
                'attr' => [
                    'class' => 'fake-file-field',
                    'data-ratio' => 1
                ]
            ])
            ->add('dimension', DimensionType::class, [
                'required' => false,
                'mapped' => false
            ])
            // ...
        ;
    }

    public function getBlockPrefix() {
        return 'post';
    }
}

Twig 模板

在您想显示Cropload字段的地方添加这两行代码

{{ form_widget(form.illustration) }}
{{ form_widget(form.dimension) }}

表单提交后处理文件

按以下方式修改您的控制器

<?php

namespace Acme\BlogBundle\Controller;

// ...

class BlogController extends Controller
{

    use \Thunken\CroploadBundle\Traits\UploadableController;
    
    // ...
    
    public function createPost(Request $request) {
        // ...
        if ($form->isValid($form)) {

            $webPath = $flow->getFormData()->getIllustration();

            $postParameters = $request->request->get('post');
            $this->handleIllustration($webPath, $postParameters['dimension']);
            // ...
        }
        // ...
    }
}

您的目标实体无需任何更改。

表单主题

在您的app/config.yml文件中添加或修改twig表单主题部分

twig:
    # ...
    form_themes:
        # ...
        - 'ThunkenCroploadBundle:Form/Themes:cropload.html.twig'

您可以轻松覆盖这些cropload表单小部件（例如，使用LiipImagineBundle来避免显示完整尺寸的图像）

twig:
    # ...
    form_themes:
        # ...
        - 'CompanyYourBundle:Form/Themes:cropload.html.twig'

使用LiipImagineBundle的Cropload小部件示例

<div id="illustration-field-group" class="form-group">

    <div class="btn btn-block btn-flat btn-file">
        Click to upload an image&hellip;
        <input class="fileupload-trigger"
               type="file"
               name="file"
               accept="image/png,image/gif,image/jpg,image/jpeg"
               data-url="{{ oneup_uploader_endpoint('post') }}" />

        {{ form_widget(form.illustration, {
            'label': false
        }) }}

        <div id="file-upload-progress" class="progress hidden">
            <div class="progress-bar progress-bar-success" style="width: 0;"></div>
        </div>
    </div>

    {% set image = '' %}
    {% set imagePath = '' %}
    {% set imageThumbnailPath = '' %}
    {% if form.vars.value.illustration %}
        {% set image = '/' ~ form.vars.value %}
                    {% set imagePath = asset(image | imagine_filter('cropload_illustration')) %}
                    {% set imageThumbnailPath = asset(image | imagine_filter('cropload_thumb_illustration')) %}
    {% endif %}

    <div class="preview-modal-link-wrapper">
        {% include 'ThunkenCroploadBundle:Partials:image-cropper.html.twig' with {
        'imagePath': imagePath, 'imageThumbnailPath': imageThumbnailPath
        } %}
    </div>

</div>

LiipImagineBundle过滤器配置示例

liip_imagine:
    
    # ...
    
    filter_sets:
        # ...
        cropload_illustration:
            quality: 100
            filters:
                thumbnail: { size: [650, 310], mode: outbound, allow_upscale: true }

        cropload_thumb_illustration:
            quality: 100
            filters:
                thumbnail: { size: [300, 150], mode: outbound, allow_upscale: true }
        # ...

添加前端依赖项

Bower包含示例（在bower.json文件中）

{
  "name": "yourprojectname",
  "version": "yourprojectversion",
  "dependencies": {
    "bootstrap": "3.*",
    "jquery": "3.*",
    "jquery-ui": "1.11.*",
    "blueimp-file-upload": "9.14.*",
    "cropper": "2.3.*"
  }
}

然后，在每个包含Cropload字段的twig表单模板中添加这些行

{% block extraJs %}
    {% javascripts

    '<your_front_vendor_folder>/jquery-ui/ui/widget.js'
    '<your_front_vendor_folder>/blueimp-file-upload/js/jquery.iframe-transport.js'
    '<your_front_vendor_folder>/blueimp-file-upload/js/jquery.fileupload.js'
    '<your_front_vendor_folder>/cropper/dist/cropper.js'

    '@ThunkenCroploadBundle/Resources/js/image-upload-manager/image-upload-manager.js'

    output="<your_public_assets_folder>/cropload.js"
    filter=''
    %}

    <script type="text/javascript" src="{{ asset_url }}"></script>

    {% endjavascripts %}
{% endblock %}

也要在包含Cropload字段的每个模板中包含样式表

CropLoad特定样式，此文件仅包含显示裁剪预览的“模态”的样式。该捆绑包提供了一个less示例。

Example file path: CroploadBundle/Resources/less/cropload.less

Cropper库特定样式

<your_front_vendor_folder>/cropper/dist/cropper.css

注意

命名类

此捆绑包提供了一个默认的文件命名类，旨在避免在单个文件夹中达到最大文件数。
您可以通过定义服务来扩展它或编写自己的服务

services:
    cropload.date_chunk_namer:
        class: YourCompany\YourBundle\Naming\YourNamer

上传监听器

此捆绑包提供了一个默认的上传监听器，用于OneUploaderBundle，并通过服务定义。

监听器路径

CroploadBundle/EventListener/UploadListener.php

如果您决定覆盖此监听器，请记住您需要在响应数组中设置webPath和fileName。

服务定义

services:
    cropload.upload_listener:
        class: Thunken\CroploadBundle\EventListener\UploadListener
        arguments: ["@doctrine.orm.entity_manager", "%upload_web_dir%", "%upload_root_dir%"]
        tags:
            - { name: kernel.event_listener, event: oneup_uploader.post_persist, method: onUpload }

增强此捆绑包

此捆绑包最初是为特定项目开发的，我们可以使其更模块化。
为了避免编写已存在的代码，它强烈依赖于出色的第三方库，我们可以使其更可配置。
我们可以将强制比例设置为可选。
我们可以处理多个文件的上传。
我们可以使用事件来处理文件上传过程。
使文档更清晰。
编写单元测试！
??

它是为内部项目制作的，并且有一些特定功能需要改进，我们希望分享结果。

因此，如果您有任何建议、增强、问题或需要帮助，请随时联系我们或提交。任何反馈都受到欢迎。

thunken / croploadbundle

维护者

详细信息