首页 文章

在symfony中预览多个上传的图像

提问于
浏览
1

我想在上传前用javascript预览我的图片,我在symfony工作,我用它的FileType表格 . 这是我的代码:

{% block content %}

    {{ form_start(form, {'attr': {'id': 'image_form', 'class': 'form-horizontal container'}} ) }}

    <div class="col-md-6">    
            <div class="form-group">
                <div class="col-md-3 text-right">
                    {{ form_label(form.name, 'Images to upload :', {'label_attr': {'class': 'control-label'}}) }}
                </div>
                <div class="col-md-8">

                    <div id="wrapper" style="margin-top: 20px;">
                    {{ form_widget(form.name, {'attr': {'id' : 'fileUpload'}}) }}
                    </div>
                    {{ form_errors(form.name) }}
                </div>
            </div>

        <div class="col-md-offset-7">

            {{ form_label(form.Upload) }}
            {{ form_widget(form.Upload, { 'label': 'Upload', 'attr': {'class': 'btn btn-info'}}) }}
            <button type="reset" class="btn btn-default">Clear</button>
        </div>
        <div id="image-holder"></div>
    </div>    

    {{ form_end(form) }}

{% endblock %}

    {% block javascripts %}

        {{ parent() }}

        <script>
            $(document).ready(function() {
                $("#fileUpload").on('change', function() {
                    //Get count of selected files
                    var countFiles = $(this)[0].files.length;
                    var imgPath = $(this)[0].value;
                    var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
                    var image_holder = $("#image-holder");
                    image_holder.empty();
                    if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
                        if (typeof(FileReader) != "undefined") {
                            //loop for each file selected for uploaded.
                            for (var i = 0; i < countFiles; i++)
                            {
                                var reader = new FileReader();
                                reader.onload = function(e) {
                                    $("<img />", {
                                        "src": e.target.result,
                                        "class": "thumb-image"
                                    }).appendTo(image_holder);
                                }
                                image_holder.show();
                                reader.readAsDataURL($(this)[0].files[i]);
                            }
                        } else {
                            alert("This browser does not support FileReader.");
                        }
                    } else {
                        alert("Pls select only images");
                    }
                });
            });
        </script>
    {% endblock %}

我用一个简单的文件类型的html输入尝试了相同的东西,它工作正常,但为什么它不在Symfony形式?

1 回答

  • 2

    这是因为Symfony2 form_div_layout 为每个小部件添加了自己的id

    {%- block widget_attributes -%}
      id="{{ id }}" name="{{ full_name }}"
      ....
    

    因此,您必须将 {'id' : 'fileUpload'} 更改为 {'class' : 'fileUpload'} 并将 $("#fileUpload").on('change' 更改为 $(".fileUpload").on('change' 并检查结果 . 或者重写表单布局 .

相关问题