Php Symfony文件类型自定义_Php_Twitter Bootstrap_Symfony_Twig

Php Symfony文件类型自定义

php twitter-bootstrap symfony twig

Php Symfony文件类型自定义,php,twitter-bootstrap,symfony,twig,Php,Twitter Bootstrap,Symfony,Twig,我正在尝试使用twig自定义Symfony中文件输入的呈现 plugins.krajee.com/file-basic-usage-demo 我遵循以下文件：在my config.yml中 # Twig Configuration twig: form_themes: - 'bootstrap_3_layout.html.twig' kartik_js: inputs: - "%kernel.root_dir%/../vendor/kartik

我正在尝试使用twig自定义Symfony中文件输入的呈现

plugins.krajee.com/file-basic-usage-demo

我遵循以下文件：

在my config.yml中

# Twig Configuration
twig:
    form_themes:
        - 'bootstrap_3_layout.html.twig'

kartik_js:
    inputs:
        - "%kernel.root_dir%/../vendor/kartik-v/bootstrap-fileinput/js/fileinput.js"
        - "%kernel.root_dir%/../vendor/kartik-v/bootstrap-fileinput/js/locales/fr.js"
        - "%kernel.root_dir%/../vendor/kartik-v/bootstrap-fileinput/themes/explorer/theme.js"

kartik_css:
    inputs:
        - "%kernel.root_dir%/../vendor/kartik-v/bootstrap-fileinput/css/fileinput.min.css"
        - "%kernel.root_dir%/../vendor/kartik-v/bootstrap-fileinput/themes/explorer/theme.css"

我尝试所有的方法

1）在myview.html.twig中的视图中自定义（这是现有引导布局的副本，我只是添加class=“file”）

这给了我一个错误

The merge filter only works with arrays or "Traversable", got "NULL" as first argument.

2）创建一个外部文件

在resources/View/Form/fields.html.twig中

{% block form_widget_simple -%}
    {% if type is not defined or type not in ['file', 'hidden'] %}
        {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control')|trim}) -%}
    {% endif %}
    {%- set type = type|default('text') -%}
    <input class="file" type="file" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
{%- endblock form_widget_simple %}

但所有字段都是定制的

3）在视图的呈现中添加类

{% form_theme form 'form/fields.html.twig' %}

{{ form_widget(form.imageFile, {'attr': {'class': 'file', 'type': 'file'} }) }}

对于最后两种方法，我得到：

我愿意接受所有的解决方案

谢谢你的帮助。

我找到了

使用kartik-v/bootstrap文件输入，它可以正常工作

安装后，我在config.yml中添加了一些assetic

# Twig Configuration
twig:
    form_themes:
        - 'bootstrap_3_layout.html.twig'

kartik_js:
    inputs:
        - "%kernel.root_dir%/../vendor/kartik-v/bootstrap-fileinput/js/fileinput.js"
        - "%kernel.root_dir%/../vendor/kartik-v/bootstrap-fileinput/js/locales/fr.js"
        - "%kernel.root_dir%/../vendor/kartik-v/bootstrap-fileinput/themes/explorer/theme.js"

kartik_css:
    inputs:
        - "%kernel.root_dir%/../vendor/kartik-v/bootstrap-fileinput/css/fileinput.min.css"
        - "%kernel.root_dir%/../vendor/kartik-v/bootstrap-fileinput/themes/explorer/theme.css"

然后在视图中添加css和js

{% block stylesheets %}
    {{ parent() }}
    {% stylesheets '@kartik_css' combine=true %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
    {% endstylesheets %}
{% endblock %}


{% javascripts '@kartik_js' combine=true %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

还有Javascrip

$("#fos_user_profile_form_imageFile").fileinput({
    language: 'fr',
    showUpload: false,
    allowedFileExtensions: ['jpg', 'png', 'gif']
});

结果

我希望这能帮助一些人：）

祝你有愉快的一天