title: Ajax send image within data
body: <p>I'm trying to send some data by Ajax and this data may contain an image.</p>
  
  <p>I <strong>don't have any forms</strong>, so I can't submit by the traditional way.</p>
  
  <p>This is my HTML: </p>
  
  <pre><code>&lt;input type="file" accept="image/png,image/jpg,image/jpeg,image/bmp" id="addProduct_image"&gt;
  </code></pre>
  
  <p>Whenever the user changes the file I get that value.</p>
  
  <pre><code>var files;
  
  $(document).on('change', '#addProduct_image', function(e){
      prepareUpload(e);
  });
  
  function prepareUpload(event){
    files = event.target.files;
  }
  </code></pre>
  
  <p>When the OK button is pressed I call an ajax function.</p>
  
  <pre><code>$(document).on('click', '#addProduct_OK', function(e){
      var img = new FormData();
      $.each(files, function(key, value)
      {
          img.append(key, value);
      });
  
      $.ajax({
          url: 'responses/product.php?type=productAdd',
          type: 'POST',
          data: {title: $("#addProduct_title").val(), description: $("#addProduct_description").val(), 
                 image: img, status: $("#addProduct_status").val()
                },
          success: function(data){
              console.log(data);
          }
      });
  });
  </code></pre>
  
  <p>I'm currently receiving the error on chrome console </p>
  
  <blockquote>
    <p>Uncaught TypeError: Illegal invocation</p>
  </blockquote>
  
  <p>in the ajax line. I'm to far away from how to send an image by ajax with other data also?</p>