Question

我想在上传前用javascript预览我的图片，我在symfony＆amp;我将其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输入尝试了同样的事情，＆amp;它工作得很好，但为什么它没有Symfony形式？

Answer 1

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

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

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

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

1 个答案: