Symfony 2.3如何通过复选框隐藏/显示图像


Symfony 2.3 how to hide/show image via checkbox

我的问题是,我希望能够隐藏或显示通过复选框上传的图像,即我上传的图像A,一个复选框将随之而来,如果选中隐藏图像,当未选中显示图像。我想给他们值像1和0,但我不知道我应该在哪里做这个,它是在Javascript吗?还是symfony表单/实体/控制器?

最好的方法是使用Javascript。我建议你采取以下步骤:

1/在Symfony中集成一个复选框

2/使用javascript隐藏复选框

3/当图片上传时,显示图片(参见下面步骤的代码摘录)+显示复选框

4/检测事件(点击复选框),获取事件的值,并根据其值隐藏或显示图像

可能有助于显示图像的代码摘录:

$(function() {
$(".upload-file input").each(function(){
    $(this).on("change", function(){
        var files = !!this.files ? this.files : [];
        if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
        if (/^image/.test( files[0].type)){ // only image file
            var reader = new FileReader(); // instance of the FileReader
            reader.readAsDataURL(files[0]); // read the local file
            reader.onloadend = function(){ // set image data as background of div
                $("#imagePreview").css("background-image", "url("+this.result+")");
                // Show picture fields
                if (typeof hideShowFieldsPictureForm !== 'undefined') {
                    hideShowFieldsPictureForm();
                }
                if ($('#hideShowPixFields').length) {
                    $('#hideShowPixFields').removeClass('hidden');
                }
            };
        }
    });
});
if ($('#uploadFileBtn').length) {
    $('#uploadFileBtn').click(function() {
        $('.upload-file input[type=file]').click();
    });
}

});

在树枝上:

   {# Main Picture #}
    <table class="upload-file">
        <tr>{{ form_errors(form.picture.file) }}</tr>
        <tr>
            <td>
                {{ form_widget(form.picture.file) }}
                <div id="imagePreview"></div>
            </td>
        </tr>
    </table>