title: Preview multiple uploaded images in symfony
body: <p>I wanna preview my images with javascript before uploading it, I'm working in symfony &amp; I use its FileType for form.. Here is my Code :</p>
  
  <pre><code>{% block content %}
  
      {{ form_start(form, {'attr': {'id': 'image_form', 'class': 'form-horizontal container'}} ) }}
  
      &lt;div class="col-md-6"&gt;    
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-3 text-right"&gt;
                      {{ form_label(form.name, 'Images to upload :', {'label_attr': {'class': 'control-label'}}) }}
                  &lt;/div&gt;
                  &lt;div class="col-md-8"&gt;
  
                      &lt;div id="wrapper" style="margin-top: 20px;"&gt;
                      {{ form_widget(form.name, {'attr': {'id' : 'fileUpload'}}) }}
                      &lt;/div&gt;
                      {{ form_errors(form.name) }}
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;div class="col-md-offset-7"&gt;
  
              {{ form_label(form.Upload) }}
              {{ form_widget(form.Upload, { 'label': 'Upload', 'attr': {'class': 'btn btn-info'}}) }}
              &lt;button type="reset" class="btn btn-default"&gt;Clear&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="image-holder"&gt;&lt;/div&gt;
      &lt;/div&gt;    
  
      {{ form_end(form) }}
  
  {% endblock %}
  
      {% block javascripts %}
  
          {{ parent() }}
  
          &lt;script&gt;
              $(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 &lt; countFiles; i++)
                              {
                                  var reader = new FileReader();
                                  reader.onload = function(e) {
                                      $("&lt;img /&gt;", {
                                          "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");
                      }
                  });
              });
          &lt;/script&gt;
      {% endblock %}
  </code></pre>
  
  <p>I, tried the same thing with a simple html input of type of file, &amp; it was working fine, but why it doesn't in the Symfony form?</p>