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

Question

我的问题是我希望能够通过复选框隐藏或显示上传的图像，即我上传了图像 A，如果选中隐藏图像，当未选中显示图像时，会附带一个复选框。我正在考虑给他们像 1 和 0 这样的值，但我不知道我应该在哪里执行此操作，是在 Javascript 中吗？还是在 symfony 形式/实体/控制器中？

任何帮助将不胜感激，在此先感谢。

Answer 1

对您来说最好的方法是使用 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>