title: How to show upload image preview using jquery before form submit in a div
body: <p>I am dealing with a form that contains various form elements with an option to upload multiple images(upto 6 max). Now i am having a div <code>preview</code> on clicking that div i fetch all form fields using jquery (form still not submitted at this time as its a multi form step1, 2 and 3). Now the problem is that i am fetching all form data with this code - </p>
  
  <pre><code>var allFormData = $("#myform").serializeArray(); 
  </code></pre>
  
  <p>Using this another code i am able to show rest of the data in div, but image is not coming. </p>
  
  <pre><code>$.each(adtitletoshow, function(i, field){
      if( field.name == 'desc'){ 
          $(".add_desc").text(field.value);
      }
  });
  </code></pre>
  
  <p>This is the filed created by JS to upload image.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var total_images = 1 ;
      function add_file_field () {
          total_images++ ;
          if ( total_images &gt; 6 ) return ;
          var str_to_embed = '&lt;input name="fileImage[]" size="40" style="width: 500px;" type="file" onChange="add_file_field()"&gt;&lt;br&gt;' ;
          $("#image_stack").append ( str_to_embed ) ;
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>All things going on single page so i need a solution that how can i load images under my preview div. Let me know if thr is some point of ambiguity still persists.</p>