預覽多個上傳symfony的圖像

Question

我想在上傳之前預覽我用JavaScript圖片，我在symfony中&工作，我使用它的文件類型的表格。這裏是我的代碼：

{% 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輸入類型的文件，&它工作正常，但它爲什麼不在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'和檢查結果。或者重寫表單佈局。