预览多个上传symfony的图像

问题描述：

我想在上传之前预览我用JavaScript图片，我在symfony中&工作，我使用它的文件类型的表格。这里是我的代码：预览多个上传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形式？

你确定'form.name'是文件输入吗？也许你应该添加'{'id'：'fileUpload'}'不要'form.name'，而是'form.Upload'？ – Ziumin

但是我想在上传之前查看图像！ – Shosiria

这里是我的代码的来源：http://codepedia.info/html5-filereader-preview-image-show-thumbnail-image-before-uploading-on-server-in-jquery/ – Shosiria

答

这是因为Symfony2的form_div_layout将自己的ID到每一个部件

{%- block widget_attributes -%} 
    id="{{ id }}" name="{{ full_name }}" 
    ....

所以你必须改变{'id' : 'fileUpload'}到{'class' : 'fileUpload'}和$("#fileUpload").on('change'到$(".fileUpload").on('change'和检查结果。或者重写表单布局。

预览多个上传symfony的图像

相关推荐