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>