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:

<canvas id="canvas"></canvas>
<form enctype="multipart/form-data" id="myform" method="post" action="">
<input type="file" name="image" id="image" />
... (other input tags)
<button type="submit" id="upload">Upload</button>
</form>

$('#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');  
});

Whilst I get the json data just fine, the form data are just empty. Is there any other better solution?

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:

<canvas id="canvas"></canvas>
<form enctype="multipart/form-data" id="myform" method="post" action="">
<input type="file" name="image" id="image" />
... (other input tags)
<button type="submit" id="upload">Upload</button>
</form>

$('#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');  
});

Whilst I get the json data just fine, the form data are just empty. Is there any other better solution?

• javascript
• jquery
• ajax
• json

1 Answer 1

remove

var dataString = JSON.stringify(data.serializeObject());

,it's already Json,

and try to set ajax properties:

    processData: false,
    contentType: false,