Symfony 2.3 wie man das Bild über Checkbox ein-/ausblenden

Question

Mein Problem ist, dass ich ein hochgeladenes Bild über das Kontrollkästchen verstecken oder anzeigen kann, dh ich habe Bild A hochgeladen, ein Kontrollkästchen wird dazu kommen, dass das Bild ausblenden , wenn nicht aktiviert, Bild anzeigen. Ich dachte daran, ihnen Werte wie 1 und 0 zu geben, aber ich habe keine Ahnung, wo soll ich das machen, ist das in Javascript? oder in symfony Formen/Entitäten/Controller?

Jede Hilfe wäre sehr geschätzt, danke im Voraus.

Answer 1

Der beste Weg für Sie ist die Verwendung von Javascript. Ich würde Ihnen die folgenden Schritte vorschlagen:

1/Integrieren Sie ein Kontrollkästchen in Symfony-Form.

2/Das Kontrollkästchen mit Javascript ausblenden.

3/Wenn das Bild hochgeladen wird, zeigen das Bild (einen Auszug des Codes siehe unten für diesen Schritt) + das Kontrollkästchen Anzeigen

4/Detect das Ereignis (Klick auf die Checkbox), erhalten den Wert von es und entsprechend seinem Wert, verbergen oder das Bild

Ein Auszug des Codes angezeigt, die Sie zur Anzeige des Bildes helfen könnten:

$(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(); 
    }); 
} 

});

Und in dem Zweig:

{# 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>