 <p>JSON objects are made only to transfer strings, basic objects, integers and a few other things. They are not meant for sending images. However, if you still want to try implementing this in your own way, I can think of two ways to do it. Firstly, just send the name of the images (exact link) or upload it and provide the path.</p> <p>Or secondly, convert it to base64 in the browser, send it, and have code convert it back whenever required.</p> <p>That would look something like this:</p> <pre><code>&lt;form method="async" onsubmit="addImage(this.image)"&gt; &lt;input type="file" name="image" /&gt;&lt;br /&gt; &lt;input type="submit" value="Submit" /&gt; &lt;/form&gt; &lt;div id="content"&gt;&lt;/div&gt; &lt;script&gt; function addImage(img) { $.ajax({ type: "POST", url: "/chat", data: {'image': toBase64(img)}, cache: false }); } function toBase64(img) { // Create an HTML5 Canvas var canvas = $( '&lt;canvas&gt;&lt;/canvas&gt;' ) .attr( 'width', img.width ) .attr( 'height', img.height ); // Initialize with image var context = canvas.getContext("2d"); context.drawImage( img, 0, 0 ); // Convert and return return context.toDataURL("image/png"); } &lt;/script&gt; </code></pre>