title: jQuery upload and preview image onchange through ajax without submitting the whole form
body: <p>What I am trying to do is to keep the form as it is by showing uploaded images until it's posted, because images can have titles. (Like Facebook status updates)</p>
  
  <p>There are a few inputs in my form, so I can't use .on('change') for upload only. The one below is an excerpt because my form is quite a long one.</p>
  
  <p>I didn't include my php file because it's very long and it works if I use #uploadForm instead of #uploadimages</p>
  
  <p>The question is, how can I submit only images before submitting form? (Because I want my users to be able to see the preview of the pictures they upload)</p>
  
  <pre><code>&lt;form id="uploadForm" action="form.php" method="post" enctype="multipart/form-data"&gt;
      &lt;textarea id="statustext" name="statustext"&gt;&lt;/textarea&gt;
      &lt;label&gt;Upload Image File:&lt;/label&gt;&lt;br/&gt;
      &lt;input id="uploadimages" name="images[]" type="file" multiple class="inputFile hidden"/&gt;
      &lt;div class="button" id="trigger"&gt;Upload File&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Ajax part</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function (e) {
              $("#uploadimages").on('change', (function (e) { // Why it doesn't work?
                  e.preventDefault();
                  $.ajax({
                      url: "form.php",
                      type: "POST",
                      data: new FormData(this),
                      contentType: false,
                      cache: false,
                      processData: false,
                      success: function (data) {
                          $("#targetLayer").html(data);
                      },
                      error: function () {
                      }
                  });
              }));
          });
  
          $("#trigger").click(function(){
              $("#uploadimages").click();
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.hidden {
      display:none;
  }
  
  .button {
      border: 1px solid #333;
      padding: 10px;
      margin: 5px;
      background: #777;
      color: #fff;
      width:75px;
  }
  </code></pre>