title: Uploading files and JSON data in the same request with jquery ajax?
body: <p>I need to upload image file to canvas. Assuming the canvas already has objects, then I have to grab the json first, upload the image, and reload the page. The problem is, I can't send the uploaded image file together with json data in the same ajax request. Here is my code:</p>
  
  <pre><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  &lt;form enctype="multipart/form-data" id="myform" method="post" action=""&gt;
  &lt;input type="file" name="image" id="image" /&gt;
  ... (other input tags)
  &lt;button type="submit" id="upload"&gt;Upload&lt;/button&gt;
  &lt;/form&gt;
  
  $('#upload').bind("click",function(event) {
      event.preventDefault();
      var json = JSON.stringify(canvas.toDatalessObject());
      var url = "upload.php";
      var data = new FormData($('#myform')[0]);
      var dataString = JSON.stringify(data.serializeObject());
      $.post(url, { json: json, data: dataString }, 'json');  
  });
  </code></pre>
  
  <p>Whilst I get the json data just fine, the form data are just empty. Is there any other better solution?</p>